React函数组件重新挂载后状态变更不触发重渲染问题求助

问题根因定位 #

你遇到的核心问题是memo包裹的子组件持有了已卸载/旧组件实例的handleStatus回调，调用的setIsConnected属于失效的组件实例，具体触发逻辑：

1. 首次挂载时，父组件生成handleStatus回调，传递给子组件，子组件memo缓存后持有该回调，回调里绑定的是首次挂载实例的setIsConnected
2. 父组件触发卸载时，首次实例的setIsConnected已经失效，而你给父组件设置了相同key，React复用组件实例，新的实例生成了新的handleStatus和新的setIsConnected
3. 由于子组件的key为roomId，如果roomId没有发生变化，memo包裹的子组件不会更新，仍然持有旧的handleStatus回调，调用时走的是已经失效的旧setIsConnected，自然不会触发当前组件实例的重渲染

修复方案 #

• 给handleStatus添加useCallback包裹，同时修改memo子组件的props比较逻辑，或者直接给子组件新增一个随父组件挂载变化的key

  // 父组件新增一个挂载标记ref
  const mountKey = useRef(Math.random());
  // handleStatus用useCallback包裹，依赖项写全
  const handleStatus = useCallback((status: string) => {
    if (status !== 'connected') {
      setIsConnected(prev => prev + 1);
      statusRef.current = status;
    }
  }, []);
  // 给子组件加上mountKey作为key的一部分，确保父组件复用时子组件也会更新props
  <ChildComponent key={`${roomId}-${mountKey.current}`} roomId={roomId} handleStatus={handleStatus}/>
  

• 不要用ref来存渲染依赖的状态，你现在判断是否显示进度条用的是statusRef.current，ref更新不会触发重渲染，应该直接把status存在useState里，不需要额外的forceUpdate计数器：

  const [connectStatus, setConnectStatus] = useState<'connected' | 'disconnected'>('connected');
  const handleStatus = useCallback((status: string) => {
    setConnectStatus(status as any);
  }, []);
  // 渲染逻辑直接用state
  {connectStatus !== 'connected' && <CircularProgress />}
  

• 如果确实需要强制复用父组件实例，可在父组件的useEffect（挂载时）清理子组件的旧回调绑定，或者在子组件暴露更新回调的方法，父组件挂载时主动更新子组件持有的handleStatus。

额外排查点 #

如果上述方案不生效，可检查两点：

• 父组件复用过程中是否真的没有触发卸载/重渲染，可在父组件加useEffect的挂载/卸载日志确认实例生命周期
• 子组件的memo是否使用了自定义的比较函数，直接忽略了handleStatus的props变化，如果是的话需要调整比较逻辑，把handleStatus加入比较项

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