React WebSocket为何卡在连接状态直至组件渲染？

问题概述 #

在React组件中创建WebSocket后，控制台能打印hello there!（说明onopen已触发，连接已建立），但监听readyState的useEffect只输出CONNECTING；只有当渲染条件包含CONNECTING状态时，WebSocket才会完成状态切换，无法仅通过OPEN状态控制渲染。

问题根源 #

1. React状态追踪限制：React的useState仅追踪通过setWebsocket更新的对象引用，WebSocket实例的readyState属于内部属性变化，不会触发React状态更新，因此组件不会重新渲染，导致监听readyState的useEffect仅执行一次（此时readyState还是CONNECTING）。
2. 变量名错误：监听readyState的useEffect中使用了未定义的ws变量，应该是websocket，这直接导致依赖追踪失效。
3. 不必要的渲染依赖：原代码中onmessage的设置依赖ChildComponent的渲染，这完全多余——WebSocket的状态切换与onmessage是否定义无关，onopen触发就意味着连接已成功。

解决方案 #

核心思路是将WebSocket的readyState维护在React状态中，通过WebSocket的事件回调主动更新状态，让React感知到状态变化并触发渲染。

修改后的完整代码 #

function MyComponent() {
    const [websocket, setWebsocket] = useState(null);
    // 单独维护readyState的React状态
    const [readyState, setReadyState] = useState(WebSocket.CONNECTING);

    useEffect(() => {
        const newWebsocket = new WebSocket(ENDPOINT);
        
        // 连接成功时更新readyState
        newWebsocket.onopen = () => {
            console.log('hello there!');
            setReadyState(WebSocket.OPEN);
        };
        
        // 连接关闭或出错时更新状态
        newWebsocket.onclose = () => {
            setReadyState(WebSocket.CLOSED);
        };
        
        newWebsocket.onerror = () => {
            setReadyState(WebSocket.CLOSED);
        };
        
        // 直接在创建WebSocket时设置onmessage，无需等待子组件渲染
        newWebsocket.onmessage = (event) => {
            console.log('received a message!', event.data);
        };
        
        setWebsocket(newWebsocket);
        
        // 组件卸载时关闭WebSocket连接，避免内存泄漏
        return () => {
            newWebsocket.close();
        };
    }, []);

    // 监听readyState的变化，此时会正确输出状态
    useEffect(() => {
        console.log(`readyState: ${readyState}`);
    }, [readyState]);

    // 仅当readyState为OPEN时渲染子组件
    return (
        readyState === WebSocket.OPEN
            ? <ChildComponent />
            : <div> No WebSocket </div>
    );
}

关键修改点说明 #

• 新增readyState状态变量，专门追踪WebSocket的连接状态，确保React能感知到状态变化。
• 在WebSocket的onopen、onclose、onerror回调中主动更新readyState，触发组件重新渲染。
• 直接在WebSocket创建时设置onmessage，避免错过早期消息，同时解除对ChildComponent渲染的依赖。
• 增加组件卸载时的清理函数，关闭WebSocket连接，防止内存泄漏。

常见误区澄清 #

• WebSocket状态切换与onmessage无关：是否定义onmessage不影响WebSocket的连接状态，onopen触发就表示连接已成功建立，readyState已变为OPEN。
• 内部属性变化不会触发React渲染：React不会自动追踪对象内部属性的变化，必须通过setState主动更新状态才能触发渲染。

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