如何在顶层组件监听WebSocket更新token后触发App子组件重渲染

方案1：重复调用ReactDOM.render触发更新 #

React 支持对同一个根节点多次调用render方法，内部会做DOM Diff更新，不会全量重绘，性能开销极低，完全满足你的需求。你只需要在token变更后重新执行一次render逻辑即可，修改后的代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import { GlobalStyle } from './components/global_styles';
import App from './components/App';

const ws = new WebSocket("ws://localhost:3001");
let token = JSON.parse(localStorage.getItem('loginToken') || '{}');

// 把渲染逻辑抽成公共函数
function renderApp() {
  ReactDOM.render(
    <React.StrictMode>
      <GlobalStyle />
      <App ws={ws} token={token} />
    </React.StrictMode>,
    document.getElementById('root')
  );
}

ws.onmessage = ({ data }) => {
  const parsedData = JSON.parse(data)

  switch (parsedData.type) {
    case 'login-success':
      console.log('logged in');
      token = parsedData.user;
      // token更新后重新渲染
      renderApp();
      break;

    case 'login-fail':
      console.log(parsedData.error);
      break;
  }
};

// 首次渲染
renderApp();

这种方案完全不需要改动现有App组件的逻辑，也不需要引入hooks，而且只有token变化时才会触发App的重渲染，不会产生多余的请求。

方案2：外层包裹状态组件（适合后续逻辑扩展） #

如果后续还有更多全局状态需要同步，可以在入口层封装一个根状态组件，配合React.memo避免App不必要的重渲染：

// 入口文件修改如下
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { GlobalStyle } from './components/global_styles';
import App from './components/App';
// 给原App组件包一层React.memo，只有props变化时才重渲
const MemoApp = React.memo(App);

const Root = () => {
  const [token, setToken] = useState(JSON.parse(localStorage.getItem('loginToken') || '{}'));
  const [ws] = useState(() => new WebSocket("ws://localhost:3001"));

  useEffect(() => {
    ws.onmessage = ({ data }) => {
      const parsedData = JSON.parse(data)
      switch (parsedData.type) {
        case 'login-success':
          console.log('logged in');
          setToken(parsedData.user);
          break;
        case 'login-fail':
          console.log(parsedData.error);
          break;
      }
    };
  }, [ws])

  return (
    <React.StrictMode>
      <GlobalStyle />
      <MemoApp ws={ws} token={token} />
    </React.StrictMode>
  )
}

ReactDOM.render(<Root />, document.getElementById('root'));

如果担心App重渲染触发多余请求，只要把App内的请求逻辑放在useEffect中，正确设置依赖项（比如只在挂载时执行，或者依赖特定的业务参数而非token），就不会出现重复请求的问题。

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