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對象變化時的重渲染。