【问题标题】:Are child components of a memoized component memoized too?记忆组件的子组件是否也被记忆?
【发布时间】:2021-05-23 01:48:13
【问题描述】:

从 useMemo 返回或包裹在 React.memo() 中的子组件是否也被 memoized 了? (抱歉,这可能是一个愚蠢的问题)

例如:

React.memo(<Parent><Child/></Parent>);

这里的Parent被记住了,Child是不是也被记住了?

【问题讨论】:

  • 请注意,这里的示例甚至无效,您不是 memo() 一个 JSX 元素,而是 memo() 组件函数或类。

标签: javascript reactjs react-hooks memoization react-usememo


【解决方案1】:

在 React 也不会将 React.memo 应用于孩子的意义上,孩子没有被记忆。

但是孩子在以下意义上被记住了: 假设组件 A 包含在 React.memo 中,而它的子组件 B 没有。如果 A 没有因为 memoization 重新渲染,那么 B 也不会重新渲染。

也来自文档:

React.memo 仅检查 prop 更改。如果你的函数组件 包裹在 React.memo 里面有一个 useState 或者 useContext Hook 实现,它仍然会在状态或上下文发生变化时重新呈现。

因此,如果组件状态被修改,那么它将被重新渲染,尽管它或父级已被记忆。

此外,如果 A 因为其 状态 中的某些内容发生更改而被重新渲染,那么它的子 B 也将重新渲染(假设 B 没有被记忆)。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-12-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-05
    • 2021-11-16
    相关资源
    最近更新 更多