持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
在react中存在shouldComponentUpdate用来根据state是否变化来判断是否要重新render组件，如果组件没有改变，那么就不会重新渲染组价，否则才会重新执行render,有了这样的一个生命周期函数，那么程序在运行的时候就可以减少一大部分不必要的性能开销。
预先知识
我们知道在js中主要有三种方式来进行判断是否相同
- 1. ==
- 2. ===
- 3. Object.is()
其中第一种在比较的时候会进行类型转换，不是严格意义上的相等。第二种在比较的时候会先进行类型的比较，只有类型相同的情况下，数值又相同才是真正的相等，但是在比较的时候存在几种特例：NaN不等于NaN,+0等于-O,而第三种和第二种的区别就是这两个特例其NaN等于NaN,+0不等于-O。
shouldComponentUpdate介绍
先来浅看一个例子：
import React, { Component } from 'react';
class App extends Component {
state={
count:1
}
addOne=()=>{
this.setState((state)=>({count:state.count}))
}
render() {
return (
<div>
{this.state.count}
<h1>{Math.random()}</h1>
<button onClick={this.addOne}>点我加一</button>
</div>
);
}
}
export default App;
如果组件重新渲染那么我们的随机数肯定就会改变，我们每次都设置我们的state为原来的值，这样如果还进行重新的渲染那么很明显是不合理的，但是实际运行起来它就是会进行重新渲染：
这时候我们的shouldComponentUpdate就要起作用了。
shouldComponentUpdate(nextProps, nextState){
if(根据实际的需求){
return true;
}else{
return false;
}
}
它接受两个参数，一个是下一个props,一个是下一个state,在组件中我们可以很方便的获取当前的state和props，所以只要我们对当前值和下一个值进行逻辑判断，再来决定是否需要更新组件就可以节省很多的性能。如这个例子我们只要这么写就可以了：
import React, { Component } from 'react';
class App extends Component {
state={
count:1
}
shouldComponentUpdate(nextProps, nextState){
return nextState.count!==this.state.count
}
addOne=()=>{
this.setState((state)=>({count:state.count}))
}
addTrueOne=()=>{
this.setState((state)=>({count:state.count+1}))
}
render() {
return (
<div>
{this.state.count}
<h1>{Math.random()}</h1>
<button onClick={this.addOne}>点我加一</button>
<button onClick={this.addTrueOne}>点我真的加一</button>
</div>
);
}
}
export default App;
