React重渲染时的浅拷贝

React的有状态组件在state发生变化时会重渲染，
重渲染过程为：state变化-->shouldComponentUpdate/ComponentWillReceiveProps-->componentWillUpdate-->render-->componentDidUpdate。

react进入重渲染的判定依据是state对象属性值的浅比对，如果我们需要深比对state属性值重渲染，该怎么解决呢？

比如

this.state={
type:0,
personnal:{
    name:"Tom",
    age:16
 }
}
复制代码

改为

this.state={
type:0,
personnal:{
    name:"Tom",
    age:20
 }
}
复制代码

此时，只改变personnal对象中的age属性值，react机制判断此次变化不会进入shouldComponentUpdate/ComponentWillReceiveProps。

我们加入一个开关变量personnalChange，作为personnal对象变化时的重渲染开关。

this.state={
type:0,
personnal:{
    name:"Tom",
    age:16
 },
 personnalChange:0
}
复制代码

在改变personnal属性值时，同时改变开关变量personnalChange，通过浅拷贝让react知道personnal对象发生了变化，从而进行重渲染。

this.setState({
    personnal:{
    name:"Tom",
    age:20
 },
 personnalChange:!this.state.personnalChange
})
复制代码

此时，personnalChange变化后进入shouldComponentUpdate/ComponentWillReceiveProps，在钩子函数中进行业务逻辑的处理和重渲染。

shouldComponentUpdate(nextProps,nextState){
    if(this.state.personnalChange!==nextState.personnalChange){
        //业务逻辑
        ....
        //重渲染
        return true
    }
}
复制代码

通过开关变量personnalChange实现personnal对象变化时的重渲染。

转载于:https://juejin.im/post/5c3bea71e51d455243765668