什么时候不应该使用 React Pure Component (React.memo) 以及错误使用它的缺点是什么？

Question

好吧，React.memo HOC 模仿了“功能组件”，就像扩展 React.PureComponent 会对“类组件”所做的那样。

如果某些重新渲染是由某些父组件触发的，则纯组件在其 props 未更改的情况下不会重新渲染。好的

但我不明白什么时候不应该使用 React.memo 作为函数组件。在我看来，它似乎始终是最好的解决方案，在某种程度上应该是 React 组件的默认行为。但事实并非如此。我对此不明白什么？在哪个示例中我们不应该使用 React.memo 或依赖纯组件？

如果我的 React 组件不应该是 Pure 的，但我却做到了，那么有什么缺点？

Answer 1

但是我不明白什么时候不应该使用 React.memo 来实现功能 组件。

首先，让我们了解何时以及为何应该使用

React.memo

，然后我们将了解何时不使用它。

React.memo

的用例是为了在 props 没有改变时你不想重新渲染组件。因此，默认情况下，会执行引用完整性检查来检查 prop 是否发生更改。现在，如果存在原始类型，则可以轻松执行此检查。但如果道具是

function

或

object

，这种比较就不那么简单了。

例如

var fun = () => {};
var anotherFun = ()=>{};

console.log(fun === anotherFun); //returns false

所以当 props 是一个函数或对象时，如果你尝试与它之前的值进行比较，它会返回 false，并且如果你仅仅依靠这种比较就会完成重新渲染

所以这就是为什么你几乎总是在传递 props 的父函数中看到

React.memo

伴随着

useCallBack

。这是为了检查引用完整性。

useCallBack

确保新的 Prop 没有改变，并且在子组件内部

React.memo

与之前的值进行比较（通过浅比较），如果没有改变，它可以避免重新渲染。

那么为什么这不应该成为 React 中的默认行为呢？

那是因为这种比较是有代价的。在后台，必须进行这些比较和计算，如果增益不成比例，这可能会很昂贵。

想象一下，如果您将 useCallBack 用于本质上不太昂贵的方法，并且还在将其作为参数的子组件中使用 React.memo。对于父组件中的每个渲染周期，都将执行这些计算，这可能会降低性能，而不是真正提高性能。