性能优化 ​

这小节内容集中在组件的性能优化上，这一方面的性能优化也基本集中在shouldComponentUpdate这个钩子函数上做文章。

PS：下文中的 state 指代了 state 及 props

在shouldComponentUpdate函数中我们可以通过返回布尔值来决定当前组件是否需要更新。这层代码逻辑可以是简单地浅比较一下当前state和之前的state是否相同，也可以是判断某个值更新了才触发组件更新。一般来说不推荐完整地对比当前state和之前的state是否相同，因为组件更新触发可能会很频繁，这样的完整对比性能开销会有点大，可能会造成得不偿失的情况。

当然如果真的想完整对比当前state和之前的state是否相同，并且不影响性能也是行得通的，可以通过 immutable 或者 immer 这些库来生成不可变对象。这类库对于操作大规模的数据来说会提升不错的性能，并且一旦改变数据就会生成一个新的对象，对比前后state是否一致也就方便多了，同时也很推荐阅读下 immer 的源码实现。

另外如果只是单纯的浅比较一下，可以直接使用PureComponent，底层就是实现了浅比较state。

class Test extends React.PureComponent {
  render() {
    return <div>PureComponent</div>;
  }
}

这时候你可能会考虑到函数组件就不能使用这种方式了，如果你使用 16.6.0 之后的版本的话，可以使用React.memo来实现相同的功能。

const Test = React.memo(() => <div>PureComponent</div>);

通过这种方式我们就可以既实现了shouldComponentUpdate的浅比较，又能够使用函数组件。