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

简介: 1.使用纯函数2.使用 React.memo 进行组件记忆(React.memo 是一个高阶组件),对于相同的输入,不重复执行;3.如果是类组件,使用 shouldComponentUpdate(这是在重新渲染组件之前触发的其中一个生命周期事件)生命周期事件,可以利用此事件来决定何时需要重新渲染组件;

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


1.使用纯函数

2.使用 React.memo 进行组件记忆(React.memo 是一个高阶组件),对于相同的输入,不重复执行;

3.如果是类组件,使用 shouldComponentUpdate(这是在重新渲染组件之前触发的其中一个生命周期事件)生命周期事件,可以利用此事件来决定何时需要重新渲染组件;

4.路由懒加载

5.使用 React Fragments 避免额外标记

6.不要使用内联函数定义(如果我们使用内联函数,则每次调用“render”函数时都会创建一个新的函数实例);

7.避免在Willxxx系列的生命周期中进行异步请求,操作dom等;

8.如果是类组件,事件函数在Constructor中绑定bind改变this指向;

9.避免使用内联样式属性;

10.优化 React 中的条件渲染;

11.不要在 render 方法中导出数据;

12.列表渲染的时候加key;

13.在函数组件中使用useCallback和useMemo来进行组件优化,依赖没有变化的话,不重复执行;

14.类组件中使用immutable对象;

相关文章
|
6月前
|
缓存 前端开发 JavaScript
react中的性能优化方案有哪些
react中的性能优化方案有哪些
31 0
|
9月前
|
存储 缓存 前端开发
React中useMemo和useCallback如何做到性能优化?
React中useMemo和useCallback如何做到性能优化?
|
9月前
|
前端开发 JavaScript
React有哪些性能优化的手段?
React有哪些性能优化的手段?
43 0
|
9月前
|
前端开发
前端学习笔记202307学习笔记第六十三天-react性能优化-16
前端学习笔记202307学习笔记第六十三天-react性能优化-16
24 0
|
9月前
|
前端开发
前端学习笔记202307学习笔记第六十三天-react性能优化-15
前端学习笔记202307学习笔记第六十三天-react性能优化-15
26 0
|
4月前
|
前端开发 JavaScript
React 性能优化新招,useTransition
React 性能优化新招,useTransition
|
4月前
|
存储 前端开发 JavaScript
React 性能优化终章,成为顶尖高手的最后一步
React 性能优化终章,成为顶尖高手的最后一步
|
4月前
|
缓存 前端开发 架构师
理解这个机制,是成为React性能优化高手的关键
理解这个机制,是成为React性能优化高手的关键
|
4月前
|
前端开发
React组件性能优化
React组件性能优化
|
5月前
|
前端开发 JavaScript
React中通过children prop或者React.memo来优化子组件渲染【react性能优化】
React中通过children prop或者React.memo来优化子组件渲染【react性能优化】
46 0