如何在React中限制重渲染范围至依赖指定Props的单个子组件？

组件结构如下（均为独立文件的函数式组件）：

<FirstLevelComponent>
    // propValue 通过 useState 在当前组件声明
    <SecondLevelComponent someProp={propValue}> 
        <ChildComponent1></ChildComponent1>
        <ChildComponent2 someProp={propValue}></ChildComponent2>
        <ChildComponent3></ChildComponent3>
    </SecondLevelComponent>
</FirstLevelComponent>

someProp 是 FirstLevelComponent 的状态值，传递给 SecondLevelComponent。当 someProp 变更时，会触发整个 SecondLevelComponent 重渲染，但实际上只有 ChildComponent2 依赖这个属性，其余子组件完全不受影响。

现在需要解决的是：怎么把重渲染范围限制在依赖 someProp 的单个子组件里，避免无关组件跟着渲染？

约束条件 #

• 这是大型生产应用，直接上Redux这类全局状态方案成本太高，实施难度极大
• 重构 SecondLevelComponent 基本不现实（这组件有1500行代码），得找对遗留项目侵入性低的简便方案，尽量少改代码

方法1：React.memo + 直接透传状态给目标子组件（绕过SecondLevelComponent） #

既然 SecondLevelComponent 只是当个容器传 someProp 给 ChildComponent2，不如直接在 FirstLevelComponent 里把 propValue 传给 ChildComponent2，同时给 SecondLevelComponent 和其他不依赖的子组件套上 React.memo，阻止不必要的重渲染。

修改后的结构：

function FirstLevelComponent() {
    const [propValue, setPropValue] = useState(/* 初始值 */);
    // 用React.memo包裹，避免因props变化触发重渲染
    const MemoizedSecondLevel = React.memo(SecondLevelComponent);
    const MemoizedChild1 = React.memo(ChildComponent1);
    const MemoizedChild3 = React.memo(ChildComponent3);

    return (
        <MemoizedSecondLevel> 
            <MemoizedChild1 />
            {/* 直接从FirstLevel传propValue，不再经过SecondLevel */}
            <ChildComponent2 someProp={propValue} />
            <MemoizedChild3 />
        </MemoizedSecondLevel>
    );
}

这样 SecondLevelComponent 不再接收 someProp，自然不会因为它的变化重渲染；ChildComponent1 和 ChildComponent3 因为被 React.memo 包裹，只要自身props不变就不会触发重渲染，只有 ChildComponent2 会跟着 propValue 变化更新。

方法2：局部Context隔离状态传递 #

如果必须让 SecondLevelComponent 保留当前的结构，不想动它的props，可以创建一个局部Context，只把 propValue 提供给 ChildComponent2，避免把状态作为props传递给整个 SecondLevelComponent。

1. 新建一个局部Context文件：

// PropValueContext.js
import { createContext, useContext } from 'react';

const PropValueContext = createContext();

export const PropValueProvider = ({ value, children }) => {
    return (
        <PropValueContext.Provider value={value}>
            {children}
        </PropValueContext.Provider>
    );
};

export const usePropValue = () => useContext(PropValueContext);

2. 调整组件结构：

function FirstLevelComponent() {
    const [propValue, setPropValue] = useState(/* 初始值 */);
    const MemoizedSecondLevel = React.memo(SecondLevelComponent);
    const MemoizedChild1 = React.memo(ChildComponent1);
    const MemoizedChild3 = React.memo(ChildComponent3);

    return (
        <MemoizedSecondLevel> 
            <MemoizedChild1 />
            {/* 只给ChildComponent2套局部Provider */}
            <PropValueProvider value={propValue}>
                <ChildComponent2 />
            </PropValueProvider>
            <MemoizedChild3 />
        </MemoizedSecondLevel>
    );
}

3. 修改 ChildComponent2 用Hook取状态：

// ChildComponent2.js
import { usePropValue } from './PropValueContext';

const ChildComponent2 = () => {
    const propValue = usePropValue();
    // 原有业务逻辑...
    return <div>{propValue}</div>;
};

这种方式完全不用碰 SecondLevelComponent 的1500行代码，只是调整了状态传递的路径，只有 ChildComponent2 会感知到 propValue 的变化并重渲染。

方法3：useCallback + React.memo（必须通过SecondLevel传递的情况） #

如果因为业务限制，必须让 SecondLevelComponent 接收 someProp，那可以把传递给 ChildComponent2 的props用 useCallback 缓存，同时给相关组件套 React.memo。

先改 FirstLevelComponent：

function FirstLevelComponent() {
    const [propValue, setPropValue] = useState(/* 初始值 */);
    // 缓存传递给ChildComponent2的props，只有propValue变化时才更新
    const child2Props = useCallback(() => ({ someProp: propValue }), [propValue]);

    return (
        <SecondLevelComponent child2Props={child2Props}> 
            <ChildComponent1 />
            <ChildComponent2 />
            <ChildComponent3 />
        </SecondLevelComponent>
    );
}

然后只需要修改 SecondLevelComponent 里渲染子组件的部分（不用动其他1500行代码）：

// SecondLevelComponent.js 找到渲染children的地方
const SecondLevelComponent = ({ child2Props, children }) => {
    // 其他1500行业务逻辑...
    
    // 遍历children，找到ChildComponent2并传递缓存的props
    const processedChildren = React.Children.map(children, child => {
        if (child.type === ChildComponent2) {
            return React.cloneElement(child, child2Props());
        }
        return child;
    });

    return (
        // 原有渲染结构...
        {processedChildren}
        // 原有渲染结构...
    );
};

最后给 ChildComponent1、ChildComponent3 和 SecondLevelComponent 套上 React.memo，这样只有当 child2Props 的依赖（也就是 propValue）变化时，ChildComponent2 才会重渲染，其他组件都不会跟着动。

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