React系列：组件性能优化 （shouldComponentUpdate， PureComponent, PureRender, Immutable）

react中有时候会有一些不必要的render，例如：1. 父组件传递props给子组件，即使props没有更新，子组件也会重新render；2. setState两次值相同，也会render

优化方法

1. shouldComponentUpdate

shouldComponentUpdate接受两个参数，要更新的props和state， 返回true或者false来确定是否要执行render；

所以可以通过比较新值和旧值是否相同，相同返回false，不同返回true来优化

class MyComponent extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			searchMore: false
		}
	}
	shouldComponentUpdate(nextProps, nextState){
		if(nextState.searchMore !== this.state.searchMore){
			return true
		}
		return false
	}
}

2. 使用react中的PureComponent

对于无状态的组件，我们可以在创建的时候继承PureComponent，这样props没有变化时，就不会重新render了

class MyComponent extends React.PureComponent {
	constructor(props) {
		super(props)
	}
	render(){
		return(
			<div>{this.props.text}</div>
		)
	}
}

3. 使用装饰器pureRender

该方法原理跟1一样，通过增强shouldComponentUpdate生命周期方法来确定是否有必要重新render
注意： 该方法只能浅比较

npm安装

npm i pure-render-decorator

使用

import pureRender from 'pure-render-decorator';

@pureRender 
class MyComponent extends React.Component {
	constructor(props) {
		super(props)
	}
	render(){
		return(
			<div>{this.props.text}</div>
		)
	}
}

Immutable.js实现深层对象的性能优化

以上几种方法只能对props和state进行浅比较，如果深比较的话也可以，不过比较消耗性能，违背初衷

Immutable数据是一旦创建出来就不可改变的，可以通过简单的逻辑实现高级存储和更改检测。每次更新数据都产生新的更新数据

Immutable.js提供了许多永久不可变数据结构，包括： List，Stack，Map，OrderedMap，Set，OrderedSet和Record。

安装

npm install immutable

使用

var map1 = Immutable.Map({ a: 1, b: 2, c: 3 });
var map2 = map1.set('b', 50);
map1.get('b'); // 2
map2.get('b'); // 50