react.PureComponent （尽量少用） 基于浅比较的方式，给每一个组件设置shouldComponentUpdate(如果自己设置了，以自己的为主)，在里面 把状态和属性都做对比，如果两者基于浅比较都没有发生任何的更改，则不再重新渲染组件 =》是基于浅比较，所以只要属性值是引用类型，但是修改后值变了，但是地址没有变，所以也不会重新渲染 注意写的时候如果是引用类型最好都是重新给一个地址例如： this.state.arr.push => setState({ arr:this.state.arr //不会通知重新渲染所以需要修改成以下 arr:[...this.state.arr] 这样是会通知的（堆内存地址变了） }) =》PureComponent对forceUpdate无效（forceUpdate根本不走shouldComponentUpdate） =》父组件是PureComponent那么子组件也具备了同样的功效（因为父组件不渲染子组件也不会渲染） =》PureComponent不能乱用，只有那些状态属性不经常的更新的组件我们用来做优化，对于经常更新的 这样处理后反而浪费性能，因为每一次浅比较也是要消耗时间的
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); }}/* * SET-STATE有个毛病 * 虽然说是改变状态并且通知组件重新渲染，但是我们不改状态值，也通知组件重新渲染了 shouldComponentUpdate => componentWillUpdate ... * forceUpdate：=>componentWillUpdate （跳过SHOULD步骤） */
