React性能优化手段

类组件中的优化手段

1、使用纯组件 PureComponent 作为基类。

2、使用 React.memo 高阶函数包装组件。

3、使用 shouldComponentUpdate 生命周期函数来自定义渲染逻辑。

方法组件中的优化手段

1、使用 useMemo。

2、使用 useCallBack。

其他方式

1、在列表需要频繁变动时，使用唯一 id 作为 key，而不是数组下标。

2、必要时通过改变 CSS 样式隐藏显示组件，而不是通过条件判断显示隐藏组件。

3、使用 Suspense 和 lazy 进行懒加载，例如：

 1 import React, { lazy, Suspense } from "react";
 2 
 3 export default class CallingLazyComponents extends React.Component {
 4   render() {
 5     var ComponentToLazyLoad = null;
 6 
 7     if (this.props.name == "Mayank") {
 8       ComponentToLazyLoad = lazy(() => import("./mayankComponent"));
 9     } else if (this.props.name == "Anshul") {
10       ComponentToLazyLoad = lazy(() => import("./anshulComponent"));
11     }
12 
13     return (
14       <div>
15         <h1>This is the Base User: {this.state.name}</h1>
16         <Suspense fallback={<div>Loading...</div>}>
17           <ComponentToLazyLoad />
18         </Suspense>
19       </div>
20     )
21   }
22 }

 

相关阅读：21个react性能优化手段

 

 

 

 

 

posted @ 2021-04-16 10:36  TerryMin  阅读(159)  评论(0)  编辑  收藏  举报