父组件调用forceUpdate后子组件未重新渲染的问题排查

问题核心 #

你的代码里，父组件通过forceUpdate触发重渲染，但子组件ImapFolderSyncStatus的fsiData始终拿不到更新后的数据——因为子组件的useEffect依赖是[]，只会在第一次挂载时执行一次，把details里的初始数据存入fsiData。后续父组件重渲染，子组件虽然也会跟着重渲染，但useState会保留之前的fsiData值，而useEffect不会再触发，自然不会更新fsiData。

为什么加key能解决？ #

React判断组件是否需要重新创建实例，核心看两个要素：组件类型，以及key属性。

• 不给子组件加key时，父组件重渲染时，React会认为这是同一个ImapFolderSyncStatus组件实例，只会更新它的props，不会销毁重建。所以子组件的state（fsiData）会被保留，useEffect（依赖[]）也不会再次执行。
• 给子组件加了key，且key值会随details里的数据变化（比如用details.get("fsi")或更新时间当key），父组件重渲染时key改变，React会判定这是一个新的组件实例：它会销毁旧的子组件，重新创建一个新的。新实例的useState会重新初始化，useEffect（依赖[]）也会再次执行，从而从更新后的details里拿到最新的fsiData。

更优的解决方案（无需forceUpdate和key） #

其实没必要用forceUpdate和key这类“hack”方式，React的核心是状态驱动视图，正确的做法是让子组件响应数据变化：

1. 若details是可追踪的状态（比如React state或不可变数据结构），修改子组件的useEffect依赖：

// 子组件中修改useEffect依赖
useEffect(() => {
    setFsiData(details.getFolderSyncStatusInfo());
}, [details]); // 添加details作为依赖，数据更新时自动触发

2. 若details是不可追踪的自定义类实例，直接从父组件传递需要的具体数据：

// 父组件渲染子组件时，传入已处理好的数据
return <ImapFolderSyncStatus 
    {...{getAccountDetails}} 
    folderSyncStatus={details.getFolderSyncStatusInfo()} 
/>;

// 子组件直接使用props，无需维护内部state
function ImapFolderSyncStatus({ folderSyncStatus, getAccountDetails }) {
    function renderFolderSyncStatusRows () {
        const rows = [];
        for (const key in folderSyncStatus) {
            if (Object.hasOwnProperty.call(folderSyncStatus, key)) {
                const element = folderSyncStatus[key];
                rows.push(
                    <Tr>
                        <Td>{element.folderName}</Td>
                        <Td>{element.ci.ZCount}</Td>
                        <Td>{element.ci.mailCount}</Td>
                    </Tr>
                );
            }
        }
        return rows;
    }

    return (
        <>
            <ButtonColumn align="right">
                <Button variant="flat" variantColor="primary" size="custom" onClick={getAccountDetails}>
                    <Icon className="rotate-right" />
                    {getI18N("Refresh folder")}
                </Button>
            </ButtonColumn>
            {renderFolderSyncStatusRows()}
        </>
    );
}

这种方式既符合React的设计理念，又能避免不必要的组件销毁重建。

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