React中父组件调用forceUpdate()时子组件未触发重渲染问题

• 核心问题是你采用了可变方式更新状态：你在ChildB中直接修改了父组件传入的state对象的属性值，没有调用setState生成新的状态引用。这种修改直接改动了原内存空间存储的值，所以你在父组件断点时能看到state内容变了，但React的状态对比、props对比、Hook依赖对比全都是浅比较（对比引用地址是否相等），只要state的引用地址和上一次渲染一致，React就会判定状态没有发生变化。
• 你调用forceUpdate确实能触发父组件Body重渲染，所以你能命中父组件return位置的断点，但如果ChildA被React.memo包裹做性能优化，React处理子组件更新逻辑的时候，会浅比较传入ChildA的所有props——此时state的引用和上一次渲染完全相同，React会直接跳过ChildA的重渲染流程，ChildA内部依赖该state的useEffect也会因为依赖项引用没变化，根本不执行。
• 你贴出的代码还存在JSX语法问题：return中两个同级子组件没有被根节点（Fragment、DOM容器）包裹，会触发编译报错，也可能影响正常渲染流程。

• 彻底抛弃直接修改原state的写法，所有状态更新必须通过setState做不可变更新，从根源上保证状态引用变化后React能自动触发重渲染，不需要额外调用forceUpdate：
  1. 父组件将setState方法传入ChildB，供ChildB更新状态时调用
  2. ChildB更新状态时，基于旧状态生成全新的对象/数组引用，再传给setState
     示例代码：

  const Body: FC = () =>{
    const [state, setState] = useState<any>({});
    return (
      // 用Fragment包裹同级节点修复语法问题
      <>
        <ChildA state={state} />
        <ChildB setState={setState} />
      </>
    )
  }
  
  // ChildB中更新状态的逻辑
  const handleUpdate = () => {
    setState(prevState => ({
      ...prevState, // 保留旧状态的其他字段
      targetField: newValue // 覆盖要更新的字段
    }))
  }
  

• 如果你确实有特殊场景需要保留forceUpdate能力，优化自定义Hook的写法，去掉不必要的useMemo包裹，用useCallback缓存更新函数保证引用稳定即可：

  const reducer = (state: boolean) => !state;
  export const useForceUpdate = () => {
    const [, dispatch] = useReducer(reducer, true);
    return useCallback(() => dispatch(null), [dispatch]);
  };
  

  注意不要用空依赖数组的useCallback包裹传给子组件的update方法，避免闭包捕获过期的forceUpdate引用，直接将useForceUpdate返回的稳定方法传给子组件即可。
• 如果ChildA使用了React.memo做优化，只要你遵循不可变更新的规则修改状态，传入的state prop引用变化后，memo的浅比较会自动识别到更新，正常触发ChildA重渲染和对应useEffect执行。

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