React.memo 及其用途

1. 什么是 React.memo
2. React.memo 做什么

React 很受欢迎，因为它允许开发人员构建动态应用程序。

然而，React 组件的默认行为是低效的。该库包括用于类组件的 PureComponent 和用于功能组件的 React.memo HOC 以解决此问题。

这些解决方案可以减少组件更新的次数，并使 React 应用程序更加高效。本文将探讨 React.memo 的作用以及如何使用它。

什么是 React.memo

React.memo 是一个高阶组件，它包裹了 React 中的普通函数组件。

如果组件没有任何副作用并且使用相同的 props 渲染相同的输出，React.memo 可以提高组件的速度和性能。

包裹在 React.memo 高阶组件中的应用程序及其所有子组件仅在 props 更改时才会重新渲染。如果本地状态或上下文发生变化，树中的子组件也将重新渲染。

这是包装在 React.memo HOC 中的组件示例：

const App = React.memo(() => {
  return <p>Hello World</p>;
});

App 组件下的任何组件树也会受到影响。这是 playcode 的链接。

React.memo 做什么

React 中的所有组件都有一个默认的 shouldComponentUpdate() 方法，每次它们自己或父母的 props 发生变化时都会触发重新渲染。

在 React.memo HOC 中包装一个组件可以改变这个默认行为。包装后，shouldComponentUpdate() 方法将更改，并且组件及其所有子组件仅在本地状态或 props 更改时才会重新渲染。

该方法将对状态和 props 进行浅层比较，以确定何时重新渲染。如果你看一下生命周期方法被调用的顺序，shouldComponentUpdate() 总是在渲染方法之前，因为它应该。

所以每次 props 改变时都会调用 shouldComponentUpdate()。但是只有在浅层比较确定它们的 props 发生变化时，组件和子组件才会重新渲染。

性能提升

通过减少不必要的更新，记忆（将 React 组件包装在 React.memo HOC 中）可以显着提高应用程序的性能。

你可以将组件包装在 React.memo 中，或者你可以选择性地包装组件树的某些分支。你可以使用分析工具来查找你的应用程序中是否存在足够严重的低效率以保证使用 React.memo。

根据经验，对 props 对象进行浅层比较总是比调用 React.createElement() 和比较整个组件树要便宜。

但是，如果你的组件有深度比较的 props，那么 React.memo 的浅比较是不够的。此外，如果你的组件接收并显示 children 属性值，则此高阶组件不起作用。