React中如何避免不必要的render?

React 基于虚拟 DOM 和高效 Diff 算法的完美配合,实现了对 DOM 最小粒度的更新。

大多数情况下,React 对 DOM 的渲染效率足以业务日常。但在个别复杂业务场景下,性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能,其很重要的一个方向,就是避免不必要的渲染(Render)。这里提下优化的点:

shouldComponentUpdate 和 PureComponent

在 React 类组件中,可以利用 shouldComponentUpdate或者 PureComponent 来减少因父组件更新而触发子组件的 render,从而达到目的。shouldComponentUpdate 来决定是否组件是否重新渲染,如果不希望组件重新渲染,返回 false 即可。

利用高阶组件

在函数组件中,并没有 shouldComponentUpdate 这个生命周期,可以利用高阶组件,封装一个类似 PureComponet 的功能

使用 React.memo

React.memo 是 React 16.6 新的一个 API,用来缓存组件的渲染,避免不必要的更新,其实也是一个高阶组件,与 PureComponent 十分类似,但不同的是, React.memo只能用于函数组件

相关推荐

  1. React如何避免不必要render

    2023-12-21 16:00:03       34 阅读
  2. 深入理解 React children props 和 render props

    2023-12-21 16:00:03       25 阅读
  3. reactrender阶段做了什么

    2023-12-21 16:00:03       34 阅读
  4. react re-render解决方案

    2023-12-21 16:00:03       38 阅读
  5. reactrender什么时候渲染?

    2023-12-21 16:00:03       35 阅读
  6. ReactNative实现 RSC Render 解决方案

    2023-12-21 16:00:03       34 阅读
  7. vue如何使用render函数

    2023-12-21 16:00:03       13 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-21 16:00:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-21 16:00:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-21 16:00:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-21 16:00:03       20 阅读

热门阅读

  1. redis 缓存穿透、击穿、雪崩、无底洞分析及解决

    2023-12-21 16:00:03       41 阅读
  2. HiveServer2

    2023-12-21 16:00:03       39 阅读
  3. redis cluster集群定时备份

    2023-12-21 16:00:03       33 阅读
  4. 开源键盘工程QMK

    2023-12-21 16:00:03       37 阅读
  5. Golang实践录:gin绑定解析json的两种方法

    2023-12-21 16:00:03       32 阅读
  6. 设计模式-访问模式

    2023-12-21 16:00:03       32 阅读