一篇带给你 React.memo 如何使用？

大家好

最近做的新功能有性能问题，所以我想尝试优化一下 React 组件的性能。下面我们来好好学习一下 React.memo 的用法。

~~java思维导图获取路径~~

组件状态更新和重渲染

当某个组件里的状态发生改变时，React 会调用该组件的 render 方法，生成新的 React 元素树，和原来的虚拟 DOM 对比，找出不同的地方然后给真实的 DOM 打补丁。

如果有子组件，它也会被重新渲染。

这里有一个问题：有些子组件其实并没有发生状态改变，也被重新渲染，占用了 CPU 资源。

虽然这个操作是不必要的，但 React 并不能知道传给子组件的 props 是否发生了改变。

但 React 提供了 React.memo() 方法，希望你能通过它来告知 React 该组件是否跳过重渲染。

React.memo

React.memo 是一个 高阶组件。

所谓高阶组件，其实指的就是一个接收组件并返回一个组件的函数。起名参考了高阶函数，但确实花里胡哨了一些。

React.memo 的作用是 缓存 组件，它会对传入的组件加上缓存功能生成一个新组件，然后返回这个新组件 。

在传给组件的 props 的属性和值没有发生改变的情况下，它会使用最近一次缓存的结果，而不会进