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