React性能优化的手段有哪些?

简介: React性能优化的手段有哪些?

1、使用 shouldComponentUpdate 避免不需要的渲染,


需要根据业务进行些取舍;在有子组件的情况下,为了避免子组件的重复渲染,可以通过父组件来判断了组件是否需要 PureRender


2、将 props 设置为数组或对象:


每次调用 Reat 组件都会创建新组件,就算传入的数组或对象的值没有改变

他们的引用地址也会发生改变


3、将函数的绑定移动到构造函数内,避免每次都绑定

4、使用 immutable 不可变数据,在我们项目中使用引用类型时,为了避免对原始数据的影响,一般建议使用浅拷贝(shallowCopy) 和深拷贝 (deepCopy) 对数据进行处理,但是这样会造成 CPU 和 内存的浪费,所以推荐使用 immutable


降低了“可变"带来的复杂度

节省内存,immutable 使用结构共享尽量复用内存,没有被引用的对象会被垃圾回收

可以更好的做撤销/重做,复制/5贴

不会有并发问题 (因为数据本身是不可变的)


5、给子组件设置一个唯一的 key,因为在 diff 算法中,会用 key 作为唯一标识优化渲染


相关文章
|
2月前
|
前端开发 API 开发者
你可能没有关注过的 React 性能优化,帮你突破瓶颈
你可能没有关注过的 React 性能优化,帮你突破瓶颈
|
8天前
|
缓存 监控 前端开发
react 性能优化方案?
【7月更文挑战第15天】改善React应用性能的关键策略包括:使用生产环境构建减少体积,避免不必要的渲染(如用React.memo或PureComponent),正确设置列表渲染的key,简化组件层级,实施懒加载,避免render中的复杂计算,选择优化过的库,控制重渲染范围,监控性能并合并state更新。这些优化能提升响应速度和用户体验。
12 0
|
2月前
|
前端开发 数据可视化 UED
React的代码分割:使用React.lazy和Suspense进行性能优化
【4月更文挑战第25天】使用React的`React.lazy`和`Suspense`进行代码分割可优化性能,按需加载组件以提升应用启动速度和用户体验。`React.lazy`接收返回Promise的组件动态导入,而`Suspense`提供加载指示器,保证加载过程中的用户体验。适用于大型组件或路由应用,但需注意服务器配置、避免过度拆分和确保关键代码即时加载。合理运用能显著改善应用性能。
|
2月前
|
前端开发 JavaScript API
React有哪些优化性能的手段?
React有哪些优化性能的手段
24 0
|
2月前
|
前端开发 JavaScript
React 性能优化新招,useTransition
React 性能优化新招,useTransition
|
2月前
|
存储 前端开发 JavaScript
React 性能优化终章,成为顶尖高手的最后一步
React 性能优化终章,成为顶尖高手的最后一步
|
2月前
|
缓存 前端开发 架构师
理解这个机制,是成为React性能优化高手的关键
理解这个机制,是成为React性能优化高手的关键
|
2月前
|
前端开发
React组件性能优化
React组件性能优化

热门文章

最新文章