性能优化方案，搞定 React 的纯组件！

嗨，我是你稳定更新、干货贼多的勾勾。

为了提升性能，减少渲染次数，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 world        
this.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 world        
this.onclick}>{this.state.name}      
    )  }

上面这个案例的 name 是一个数组，再修改里面的第一个元素值为“勾勾”，但是这个引用地址还是之前的那个地址，所以当我们点击的时候，组件只是做了浅层对比，name 的引用地址是一样的。虽然内容不一样，但不会导致界面发生 render。

当我们了解了 Component 和 PureComponent 的基本情况后，就能尽量避免一些不必要的重复渲染。

推荐阅读：

术与器：React 服务端渲染和静态站点生成

手动实现一个自己的 React 服务端渲染

给 React 穿上美丽的‘嫁衣’

尤雨溪 3 天 10 更的 Vite 究竟有什么魔力？

我对 Webpack 5 真香了。

腾讯QQ偷我浏览记录到底想干嘛。

点个“在看”和“赞”吧，

毕竟我是要成为前端网红的人。