React hooks实现聊天室

使用React hooks实现一个简单的聊天室，可以包括发送和接收消息的功能。以下是一个简化版的聊天室组件示例：

import React, { useState, useRef } from 'react';
 
const ChatRoom = () => {
  const [messages, setMessages] = useState([]);
  const messageInput = useRef(null);
 
  const sendMessage = () => {
    const message = messageInput.current.value;
    setMessages(messages => [...messages, message]);
    messageInput.current.value = '';
  };
 
  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <input ref={messageInput} type="text" placeholder="Type a message" />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};
 
export default ChatRoom;

这个示例包含了基本的发送消息功能和一个用于展示消息的列表。消息存储在组件的状态中，并通过一个输入框和按钮进行操作。当用户发送一条消息后，该消息将被添加到消息列表并清空输入框以供下一条消息使用。