React.PureComponent（React组件优化之浅比较）

React.PureComponent（React组件优化）

React.PureComponent：

就是基于浅比较的方式，给每个组件设置shouldComponentUpdate（若是本身设置了，以本身的为主），在里面把状态和属性都作对比，若是二者基于浅比较都没有发生任何的更改，则再也不从新渲染组件

setStart有个小毛病

虽说是改变状态而且通知组件从新渲染，可是咱们不改状态值，也通知组件从新渲染了shouldComponentUpdate => componentWillUpdate ...
 
forceUpdate：=>componentWillUpdate （跳过SHOULD步骤）
复制代码

• 好了！咱们先经过一个小案例感觉一下PureComponent部分源码,

import React from 'react';
import PropTypes from 'prop-types';

/*
 * React.PureComponent
 */
//=>把两个对象进行浅比较
// 只比较对象的第一级
// 若是属性值是基本类型的，咱们只须要比较值是否同样便可
function shallowEqual(obj1, obj2) {
	if (Object.keys(obj1).length !== Object.keys(obj2).length) {
		return false;
	}
	for (let key in obj1) {
		if (obj1[key] !== obj2[key]) {
			return false;
		}
	}
	return true;
}
class CountShow extends React.Component {
	render() {
		return <div>
			{this.props.num}
		</div>;
	}
}
export default class Count extends React.Component {
	state = {
		num: 0,
		x: 100,
		arr: [10, 20]
	};
	render() {
		console.log('OK');
		return <>
			<CountShow num={this.state.num} />
			<button onClick={ev => {
				this.state.arr.push(30);
				this.setState({
					arr: [...this.state.arr]
				});
			}}>累加</button>
		</>;
	}
	shouldComponentUpdate(nextProps, nextState) {
		return !shallowEqual(this.state, nextState) || !shallowEqual(this.props, nextProps);
	}
}

复制代码

浅比较就是只比较第一级，对于基本数据类型，只比较值；对于引用数据类型值，直接比较地址是否相同，无论里面内容变不变，只要地址同样，咱们就认为没变。因此在这种状况下，咱们之后用的时候，对于引用类型值修改状态或修改属性时候，对于它赋值的时候，咱们尽量把以前值拿过来克隆一份，赋给它新的地址就好~这是咱们的注意点！咱们想作性能优化的时候就能够在Component里作一个浅比较。

=>React.PureComponent是基于浅比较，因此只要属性值是引用类型，可是修改后的值变了，可是地址不变，也不会从新渲染

如下这段是注释---
/*
  	 this.state.arr.push(30)
    setState({
        arr:this.state.arr 不会通知从新渲染
       arr:[...this.state.arr] 这样是会通知的（堆内存地址变了）
    })
=>PureComponent对forceUpdate无效（forceUpdate根本不走shouldComponentUpdate）
=>父组件是PureComponent那么子组件也具有了一样的功效（由于父组件不渲染，子组件也不会渲染）

*/
复制代码

PureComponent使用方法

• 仍是用一样的小案例，不过比本身写方法方便的多，直接把React.Component替换成React.PureComponent便可~

import React from 'react';
import PropTypes from 'prop-types';

class CountShow extends React.Component {
   render() {
   	return <div>
   		{this.props.num}
   	</div>;
   }
}
export default class Count extends React.PureComponent {
   state = {
   	num: 0,
   	x: 100,
   	arr: [10, 20]
   };
   render() {
   	console.log('OK');
   	return <>
   		<CountShow num={this.state.num} />
   		<button onClick={ev => {
   			this.state.arr.push(30);
   			this.setState({
   				arr: [...this.state.arr]
   			});
   		}}>累加</button>
   	</>;
   }
}
复制代码

注意

• 注：PureComponent不能乱用，只有那些状态和属性不常常的更新的组件咱们用来作优化，对于常常更新的，这样处理后反而浪费性能，由于每一次浅比较也是要消耗时间的