React 性能优化十大总结

前言

性能优化是软件开发中永远不会过时的话题，本篇将介绍在React编码过程中需要注意的性能优化点。鉴于图片懒加载、虚拟滚动列表等已成为广为人知的通用性能优化手段，本文将不再赘述这些内容。

memo允许组件在 props 没有改变的情况下跳过重新渲染

默认通过Object.is比较每个prop，可通过第二个参数，传入自定义函数来控制对比过程

在每次重新渲染的时候能够缓存计算的结果

缓存函数的引用地址，仅在依赖项改变时才会更新

点击按钮，可以发现即使子组件使用memo包裹了，但还是更新了，控制台打印出“子组件渲染”。这是因为父组件App每次更新时，函数handleClick每次都返回了新的引用地址，因此对于子组件来说每次传入的都是不一样的值，从而触发重渲染。

同样的，减少使用通过内联函数绑定事件。每次父组件更新时，匿名函数都会返回一个新的引用地址，从而触发子组件的重渲染

使用useCallback可以缓存函数的引用地址，将handleClick改为

再点击按钮，会发现子组件不会再重新渲染。

使用useTransition提供的startTransition来标记一个更新作为不紧急的更新。这段任务可以接受延迟或被打断渲染，进而去优先考虑更重要的任务执行

页面会先显示list2的内容，之后再显示list1的内容

可以让我们延迟渲染不紧急的部分，类似于防抖但没有固定的延迟时间

当呈现多个元素而不需要额外的容器元素时，使用React.Fragment可以减少DOM节点的数量，从而提高呈现性能

Context 能够在组件树间跨层级数据传递，正因其这一独特机制，Context 可以绕过 React.memo 或 shouldComponentUpdate 设定的比较过程。

也就是说，一旦 Context 的 Value 变动，所有使用 useContext 获取该 Context 的组件会全部 forceUpdate。即使该组件使用了memo，且 Context 更新的部分 Value 与其无关

为了使组件仅在 context 与其相关的value发生更改时重新渲染，将组件分为两个部分。在外层组件中从 context 中读取所需内容，并将其作为 props 传递给使用memo优化的子组件。

在渲染元素列表时，尽量避免将数组索引作为组件的key。如果列表项有添加、删除及重新排序的操作，使用index作为key，可能会使节点复用率变低，进而影响性能

使用数据源的id作为key

通过React.lazy和React.Suspense实施代码分割策略，将React应用细分为更小的模块，确保在具体需求出现时才按需加载相应的部分

定义路由

引用路由

在组件卸载时清理全局监听器、定时器等。防止内存泄漏影响性能