ReactJS：基于Socket.IO实现聊天消息列表项动态追加

嘿，这个需求在聊天应用开发里太常见了，我来给你一步步拆解怎么实现，完美适配你用的类组件场景：

1. 初始化状态存储消息列表 #

首先，在你的组件里，需要用一个数组状态来保存所有收到的消息，这样后续更新时React能自动触发重新渲染：

class ChatComponent extends React.Component {
  state = {
    messages: [] // 用来存储所有聊天消息的数组
  };

  // 后续代码写在这里
}

2. 在componentDidMount中监听Socket.IO消息并更新状态 #

在组件挂载完成后，监听Socket.IO的消息事件（比如约定好的'chat message'事件名），收到新消息时，一定要基于之前的状态创建新数组（不能直接修改原数组，否则React检测不到状态变化），用函数式更新的方式更可靠：

componentDidMount() {
  // 假设你的socket实例已经通过props或者全局方式拿到了
  const { socket } = this.props;

  // 监听聊天消息事件
  socket.on('chat message', (newMessage) => {
    // 用函数式更新，确保拿到最新的prevState
    this.setState(prevState => ({
      messages: [...prevState.messages, newMessage]
      // 或者如果需要把自己发的消息也加进去，逻辑类似，只要往数组末尾追加就行
    }));
  });
}

3. 渲染动态消息列表 #

把状态里的messages数组映射成列表项，注意每个列表项需要唯一的key（建议用消息的唯一ID，没有的话可以用时间戳或者索引，不过索引尽量避免在列表有删除操作时使用）：

render() {
  const { messages } = this.state;

  return (
    <div className="chat-container">
      <ul className="message-list">
        {messages.map((msg, index) => (
          <li key={msg.id || index} className="message-item">
            <strong>{msg.sender}:</strong> {msg.content}
          </li>
        ))}
      </ul>
      {/* 这里可以加输入框和发送按钮的代码 */}
    </div>
  );
}

4. 组件卸载时清理监听（关键！防止内存泄漏） #

别忘了在组件卸载前移除Socket.IO的事件监听，避免组件销毁后还收到消息导致内存泄漏：

componentWillUnmount() {
  const { socket } = this.props;
  socket.off('chat message'); // 移除对应的事件监听
}

额外提示：处理自己发送的消息 #

如果需要把自己发送的消息也追加到列表里，发送消息后直接调用setState往messages数组里加就行，和接收消息的逻辑一致：

handleSendMessage = (content) => {
  const { socket } = this.props;
  const newMessage = { sender: '我', content, id: Date.now() };
  
  // 发送消息给服务器
  socket.emit('chat message', newMessage);
  
  // 同时更新本地状态，不用等服务器返回
  this.setState(prevState => ({
    messages: [...prevState.messages, newMessage]
  }));
}

这样就能实现持续接收消息并自动追加到列表底部的效果啦，每次收到新消息，状态更新后React会自动重新渲染列表，把新消息加进去。

内容的提问来源于stack exchange，提问作者user9580968