在现代Web应用开发中，实现实时通信功能能够极大地提升用户体验。React作为一款流行的JavaScript库，与WebSocket技术相结合，可以高效地达成这一目标。

了解一下WebSocket。它是一种双向通信协议，允许浏览器和服务器之间进行全双工通信。与传统的HTTP请求不同，WebSocket在连接建立后，双方可以随时发送和接收数据，无需客户端频繁发起请求，这大大降低了通信开销，提高了实时性。

在React项目中使用WebSocket，第一步是安装相应的库。可以通过npm install ws 或 yarn add ws来引入WebSocket库。安装完成后，就可以在React组件中创建WebSocket连接。

在React组件里，使用useState和useEffect钩子来管理WebSocket连接的状态和生命周期。例如：

import React, { useState, useEffect } from 'react';

const RealTimeComponent = () => {
  const [message, setMessage] = useState('');
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = new WebSocket('ws://localhost:8080');
    setSocket(newSocket);

    newSocket.onopen = () => {
      console.log('WebSocket连接已建立');
    };

    newSocket.onmessage = (event) => {
      setMessage(event.data);
    };

    newSocket.onclose = () => {
      console.log('WebSocket连接已关闭');
    };

    return () => {
      newSocket.close();
    };
  }, []);

  const sendMessage = () => {
    if (socket) {
      socket.send('Hello, Server!');
    }
  };

  return (
    <div>
      <p>收到的消息: {message}</p>
      <button onClick={sendMessage}>发送消息</button>
    </div>
  );
};

export default RealTimeComponent;

在上述代码中，useEffect钩子在组件挂载时创建WebSocket连接，并在组件卸载时关闭连接。onmessage事件处理函数用于接收服务器发送的消息，并更新组件的状态。sendMessage函数则用于向服务器发送消息。

服务器端可以使用Node.js和ws库来搭建WebSocket服务器。例如：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log('收到消息: ', message);
    ws.send('消息已收到');
  });

  ws.on('close', () => {
    console.log('WebSocket连接已关闭');
  });
});

通过以上步骤，我们就利用React与WebSocket实现了简单的实时通信功能。这种组合在实时聊天、在线协作等多种场景中都有着广泛的应用前景。