性能优化方案，搞定 React 的纯组件！
共 1992字，需浏览 4分钟
·
2021-02-23 13:58
嗨，我是你稳定更新、干货贼多的勾勾。
为了提升性能，减少渲染次数，React 有了纯组件。只要 state 和 props 一致，就不用再次 render，结果保持一致。
shouldComponentUpdate
在 React 官方文档中，生命周期函数中的 shouldComponentUpdate 有着特殊的意义。它的主要作用是：根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
就是说 shouldComponentUpdate 函数默认返回 true ，任何 props 的更改，任何的 setState 的操作都会导致界面的重新 render，返过来返回 false ，这些操作就无法导致界面的 render，举例如下：
//App.jsimport React from "react"class App extends React.Component {constructor(props){super(props)this.state = {name:"gougou"}this.onclick = this.onclick.bind(this)}onclick(){this.setState({name:"勾勾"})}shouldComponentUpdate(nextProps, nextState){return false;}render(){return (hello worldthis
.onclick}>{this.state.name})}
shouldComponentUpdate 函数里，我们强制修改了它的返回值为 false，结果我们在点击 p 标签的时候，是无法更改里面的内容的。
在 React 中，这个方法的唯一用途就是性能优化。也就是说当 props 和 state 没有发生改变的时候，我们不需要页面重新 render。为满足这一要求，我们就需要去搞清楚实现 shouldComponentUpdate 的逻辑，对比新旧 props 和 state，但 React 不允许我们这样做。React 自己提出了 PureComponent 纯组件的概念。
PureComponent
PureComponent 是 React 的内置组件，它会替代 shouldComponentUpdate 对 props 和 state 进行浅层比较。
浅层比较就是对引用地址的比较，主要分两类。
基本数据类型，就是单纯的值比较 1 == 1 true == true
引用类型，比如数组、对象就是地址的比较，如下例：
class App extends React.PureComponent {constructor(props){super(props)this.state = {name:["gougou"]}this.onclick = this.onclick.bind(this)}onclick(){this.state.name[0] = '勾勾';this.setState({name:this.state.name})}render(){return (hello worldthis
.onclick}>{this.state.name})}
上面这个案例的 name 是一个数组，再修改里面的第一个元素值为“勾勾”，但是这个引用地址还是之前的那个地址，所以当我们点击的时候，组件只是做了浅层对比，name 的引用地址是一样的。虽然内容不一样，但不会导致界面发生 render。
当我们了解了 Component 和 PureComponent 的基本情况后，就能尽量避免一些不必要的重复渲染。
推荐阅读：
点个“在看”和“赞”吧，
毕竟我是要成为前端网红的人。