1

我的 React 代码中有以下结构：

const Parent: React.FC<ParentProps> = (props) => {
    const [value1, setValue1] = useState<any>(null);

    return (
        <div>
            <SomeContextProvider
                contextElem1={value1}
                contextElem2={value2}
            >
                ...some code here

                <Child
                    prop1={value3}
                    prop2={value4}
                />
            </SomeContextProvider>
        </div>
    );
}
 
export default Parent;

const Child: React.FC<ChildProps> = ({ prop1, prop2 }) => {
    return (
        <div>
            {prop1} {prop2}
        </div>
    );
}
 
const propsAreEqual = (prevProps: ChildProps, nextProps: ChildProps) => {
    return true;
}


export default React.memo(Child, propsAreEqual);

如您所见：

  • Child组件不消耗 SomeContext
  • Child组件仅用 SomeContextProvider 包装（这是否意味着孩子正在使用上下文？）

这是场景：

  • 重新Parent渲染时，Child即使Child不消耗SomeContext并propsAreEqual返回，也会重新渲染true。
  • 当我移动Child到外部范围时，React.memo按预期工作并防止重新渲染Child何时Parent重新渲染。

为什么Child在不消耗上下文的情况下重新渲染？不React.memo应该防止重新渲染吗？我想念这些概念的什么？

4

1 回答 1

0

我认为你错了。我将您的代码复制到 CodeSandbox 中并对其进行了修改，以便实际构建。每当父级重新渲染时，子级都不会渲染，因为您已将其包装在React.memo(). （如果我删除了，memo()那么孩子会重新渲染。）

https://codesandbox.io/s/misty-feather-tl3p6?file=/src/App.js

如果您的代码正在触发重新渲染，可能是因为您对 propsAreEqual 函数的特定实现或您为value3or传递的值value4。

于 2022-01-11T19:03:18.243 回答