react性能优化

1. 属性传递优化
   事件申明时的this绑定方法

   <button onClick={this.onClick.bind(this)}></button>
   
   <button onClick={() => this.onClick()}></button>
   
   constructor (props) {
       super(props)
       this.onClick = this.onClick.bind(this)
   }

三种声明方式的比较：①②相对于③，再次执行时都要再渲染一编render()里的bind函数和函数声明式，而③的绑定函数只执行一次，并不会每次执行时都进行调用，对于性能方面，显然③方式会比①②更好，而且②相对①对性能的影响会低一点。所以三者对性能优化的优先级为③＞②＞①

React中，组件嵌套是十分常见的，在父组件往子组件传递对象时，应该将对象的key和value在render()内先定义再使用，不然每一次使用子组件时都会生成新的对象进行传递。(先声明, 再使用)

2. 多组件优化
   在父组件因状态的变化更改，而子组件并没有状态变化时，若子组件随着父组件一起更新，会造成比较大的性能浪费，为减少子组件额外渲染而浪费性能
   ① shouldComponentUpdate(nextProps, nextState)
   ② React.PureComponent 替换 React.Component
   ③ ImmutableJS

3. 加key

4. redux性能优化 使用reselect库
   在调用到已经执行过的数据时，react不会再次对数据进行渲染，而是从reselector中取出缓存数据加载，减少了重新渲染，达到性能优化的效果。

5. 用函数子组件进行UI和逻辑的分离, 数据的变更改变尽量少的组件

6. 一些与状态无关的属性不要放在state里, 避免数据改变重新渲染dom

7. 浅层数据对比的组件 尽量用 PureComponent

赏

1分也是爱

微信