我知道 React 在 state 或 props 改变(或者当我们强制组件重新渲染时)执行重新渲染。我也知道 React 在重新渲染时会重新渲染组件的子组件。
我注意到 React 会重新渲染子组件,即使它的 Prop (子 Prop )没有改变,所以当父组件传递与以前相同的 Prop 时。
这是为什么? React 是否会重新渲染完全无状态且无属性的子组件?
最佳答案
如果您不希望子组件重新渲染,您应该使用 React.memo , PureComponent ,或 shouldComponentUpdate生命周期钩子(Hook)。
这三个选项中的每一个都告诉 React,如果你的组件( Prop )的输入没有改变,那么重新渲染组件是没有意义的,因为组件不会改变。
如果您正在使用类组件,那么 PureComponent 或 shouldComponentUpdate 应该是您的首选。本质上,PureComponent 只是为您实现了 shouldComponentUpdate。
React.memo 应该是你使用函数组件时的首选。 React.memo 有一个函数的第二个参数来确定相等性,它的作用类似于 shouldComponentUpdate。
你应该 绝对在使用 react 组件时,使用这三个选项之一而不是重新选择。 Reselect用于内存 redux 中的选择器(或只是一般的函数调用)。它不适用于内存 react 组件。
我通常使用 reselect 来使组件的 props 稳定(使用 connect 时)并防止在每次渲染时重新计算复杂的数据。
关于javascript - React 什么时候重新渲染子组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61523675/