为何React默认不为所有组件包裹React.memo()？

首先得明确：React.memo()不是无成本的，它会对组件的props做浅比较，这个比较过程本身存在性能开销。如果这个开销比组件重新渲染的成本还高，那用它反而会拖慢整体性能。下面是几种完全没必要用它的场景：

• 小型/简单组件：比如只渲染几个文本节点、按钮这类基础元素的组件，重新渲染的成本极低。这时props比较的开销反而会抵消甚至超过避免重渲染带来的收益，纯粹多此一举。
• 组件props频繁变化：如果组件的props每次父组件渲染都会更新（比如传递的是新创建的对象、数组或者匿名函数），React.memo()的浅比较几乎每次都会返回false，组件还是会重新渲染。这种情况下加它就是做无用功，白加了一层比较逻辑。
• 组件内部状态频繁更新：如果组件自身依赖useState、useReducer的状态频繁变化，不管props有没有改动，组件都会触发重渲染。React.memo()管不了这种内部状态引发的重渲染，加了也起不到任何作用。
• 父组件与子组件总是同步渲染：比如父组件每次渲染必然会让子组件props更新，或者父组件本身就很少渲染，那React.memo()的比较逻辑就完全多余，不如让子组件跟着父组件一起渲染更直接高效。

至于你问的“难道我们不总是希望组件仅在props变化时才重新渲染吗？”——其实不然。React的默认渲染机制已经足够高效，大部分场景下，让组件跟着父组件一起渲染的成本远小于额外添加props比较的成本。只有当组件重渲染成本很高（比如复杂列表、大量DOM节点），且props不常变化时，React.memo()才会带来明显的性能提升。

内容的提问来源于stack exchange，提问作者Tsabary