在 React 中，组件的渲染是非常重要的一块内容。由于 React 的 Virtual DOM 技术，每当组件的状态发生改变时都会重新渲染组件。虽然这是非常高效的，但是当组件的数量很多时，可能会面临性能问题。在这种情况下，可以使用 React.memo 来帮助我们减少不必要的重渲染，提高应用的性能。
React.memo 简介
React.memo 是一个高阶组件（HOC），它可以帮助我们优化组件的渲染。它类似于 React.PureComponent，但是可以应用于函数式组件，从而避免了类组件的使用。使用 React.memo 可以将函数式组件与其 props 进行浅比较，如果 props 没有发生改变，组件就不会重新渲染。
使用示例
下面是一个简单的例子，演示如何使用 React.memo 来优化组件的渲染。
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------------ -
------------------- --------------
------ ------------------------
-
----- ----------------- - ------------------------
-------- ----- -
----- ------ -------- - --------------------- --------
------ -
-----
------- ----------- -- -------------- --------------- -------------
------------------ ----------- --
------
--
-在上述例子中，我们创建了一个 MyComponent 组件，并使用 React.memo 将其包裹。在组件的 props 改变时，MyComponent 会输出 "render MyComponent"，这表明组件被重新渲染了。我们在 App 组件中更新了 text，当我们点击按钮时，MyComponent 会重新渲染。但是此时，我们可以注意到控制台只输出了一次 "render MyComponent"，这是因为我们使用了 React.memo，避免了重新渲染组件。
React.memo 的限制
React.memo 的理念是“不要重复渲染相同的东西”，但是在一些场景下它会失效，这主要是因为浅比较的限制。下面是 React.memo 失效的一些情况：
- Props 为复杂类型（例如对象、数组等），如果仍然是相同的引用，但是所包含的内容发生了改变，组件仍然会重新渲染。
- Props 中包含回调函数或者函数式组件，这些函数由于每次渲染都会经历不同的生命周期，它们的引用也会发生改变，从而导致组件重新渲染。
需要注意的是，在使用 React.memo 时需要谨慎评估其适用的场景。
总结
React.memo 是 React 中用于减少不必要重渲染的优化方式之一，可以帮助我们提高组件的性能。使用 React.memo 可以简单地将函数式组件与其 props 进行浅比较，从而避免无意义的重绘。但是需要注意的是，React.memo 也有一些限制，需要谨慎评估其在实际场景中的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bff5848841e98948c4ca2