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

清疚 2024-04-19 13:12 6阅读 0赞

#### 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