记忆化组件的子组件也被记忆化了吗?
Are child components of a memoized component memoized too?
从 useMemo 返回或包装在 React.memo() 中的子组件是否也被记忆化了?
(抱歉,这可能是个愚蠢的问题)
例如:
React.memo(<Parent><Child/></Parent>);
这里Parent被memoized了,Child是不是memoized太多了?
child 没有记忆,因为 React 也没有将 React.memo
应用于 child。
但是 child 是在以下意义上记忆的:
假设组件 A 包装在 React.memo
中,而其 child 组件 B 则没有。如果 A 由于记忆化而没有重新渲染,那么 B 也不会重新渲染。
也来自文档:
React.memo only checks for prop changes. If your function component
wrapped in React.memo has a useState or useContext Hook in its
implementation, it will still rerender when state or context change.
因此,如果组件状态被修改,那么它将被重新渲染,尽管它或 parent 被记忆了。
此外,如果 A 由于其 状态 中的某些内容发生更改而重新呈现,则其 child B 也将重新呈现(假设 B 未记忆)。
从 useMemo 返回或包装在 React.memo() 中的子组件是否也被记忆化了? (抱歉,这可能是个愚蠢的问题)
例如:
React.memo(<Parent><Child/></Parent>);
这里Parent被memoized了,Child是不是memoized太多了?
child 没有记忆,因为 React 也没有将 React.memo
应用于 child。
但是 child 是在以下意义上记忆的:
假设组件 A 包装在 React.memo
中,而其 child 组件 B 则没有。如果 A 由于记忆化而没有重新渲染,那么 B 也不会重新渲染。
也来自文档:
React.memo only checks for prop changes. If your function component wrapped in React.memo has a useState or useContext Hook in its implementation, it will still rerender when state or context change.
因此,如果组件状态被修改,那么它将被重新渲染,尽管它或 parent 被记忆了。
此外,如果 A 由于其 状态 中的某些内容发生更改而重新呈现,则其 child B 也将重新呈现(假设 B 未记忆)。