React 狀態的不變性實例詳解

Posted on by

正文

不變性對應的英文單詞是 Immutability，它不是 React 中的概念，但它對寫一個正確的 React 程序至關重要。不考慮生命周期函數 shouldComponentUpdate 對組件重新渲染造成的影響，當組件的 state 發生變化時，組件將被重新渲染。

你可曾遇到過這樣一種情況——你自認為改變瞭 state 的值，但是組件沒有重新渲染？本文將揭露其中的緣由並介紹怎麼編寫符合 Immutability 原則的代碼。

什麼是 immutable

immutable 指不發生變化，這意味著創建新的值去替換原來的值，而非改變原來的值，與 immutable 相反的概念是 mutable，下面用代碼演示 mutable 和 immutable。

let user = {name: 'Bela'}
user.name = 'CI' // 改變user的name屬性
user.age = 12 // 給user新增age屬性
user = {name: 'Bela'} // 用新的值替換原來的值

上述代碼第 2 行和第 3 行都屬於改變原來的值，隻有第四行是新建一個對象，用新對象替換原來的對象。下面調用函數進一步說明 immutable 與 mutable。

function addAgeMutable(user: User) {
    user.age = 12 // 修改原來的
    return user
}
function addAgeImmutable(user: User) {
    const other = Object.assign({}, user) // 創建新的
    other.age = 12
    return other
}
let user1Original = {name: 'Bella'}
let user1New = addAgeMutable(user1Original) // 用 mutable 的方式
let user2Original = {name: 'Bella'}
let user2New = addAgeImmutable(user2Original) // 用 immutable 的方式
console.log('user1Original 與 user1New 相同嗎?',user1Original === user1New) // true
console.log('user2Original 與 user2New 相同嗎?',user2Original === user2New) // false

上述 addAgeMutable 函數直接在入參上新增 age 屬性，但 addAgeImmutable 函數沒有改變入參，而是新建瞭一個對象，在新對象上添加age屬性。

總結一下，immutable 是指不修改原來的；mutable 是指在原來的基礎上修改。通過 mutable 的方式修改變量會導致修改前後變量的引用不變。某些操作數組的方法會讓原來的數組發生變化，比如：push/pop/shift/unshift/splice，這些方法是 mutable 的，而有一些操作數組的方法不會讓原來的數組發生變化，而是返回一個新組件，比如：slice/concat，這些函數是 immutable 的。字符串、佈爾值和數值操作都不改變原來的值，而是創建一個新的值。

React 與 Immutability

在 React 程序中，組件的 state 必須具備不變性，接下來演示修改state的正確與不正確的方式。為瞭說明state的組成結構，先定義個State接口，代碼如下：

interface State {
  user: User
  hobbies: string[]
  time: string
}

從上述接口可以看出，組件有三個狀態，分別為：user、hobbies 和 time，它們的數據類型各不相同。

修改 state 的錯誤案例

下面羅列的案例試圖用 mutable 的方式修改 state，這些做法全部是錯誤的。

// 案例一
this.state.user.age = 13
// 案例二
this.setState({
    user: Object.assign(this.state.user, {age: 13})
})
// 案例三
this.setState({
    hobbies: this.state.hobbies.reverse(),
})
// 案例四
this.state.hobbies.length = 0
this.setState({
    hobbies: this.state.hobbies,
})
  • 案例一: 直接修改 user 的內部結構，修改前後 user 的引用不變。
  • 案例二: 錯誤使用 Object.assign，Object.assign 將第二個參數的屬性合並到第一個參數上，然後將第一個參數返回，這意味著案例二還是修改瞭user的內部結構，修改前後user的引用不變。
  • 案例三: 使用reverse將數組翻轉，它翻轉的是原數組，翻轉前後數據的引用不變。
  • 案例四: 修改hobbies的長度，修改前後hobbies的引用一樣。

上述四個案例都不符合數據一旦創建就不發生變化的原則，由於調用瞭 setState 方法，所以對於用 React.Component 創建的組件而言，不會發生故障，對於用 React.PureComponent 創建的組件，會引發故障，即：界面不更新。

修改 state 的正確案例

下面羅列的案例與錯誤案例一一對應，它們通過 immutable 的方式修改 state。

    // 案例一
    this.setState({
        user: {...this.state.user, age: 13}
    })
    // 案例二
    this.setState({
        user: Object.assign({},this.state.user, {age: 13})
    })
    // 案例三
    this.setState({
        hobbies: [...this.state.hobbies].reverse()
    })
    // 案例四
    this.setState({
        hobbies: []
    })

上述案例都是新建一個值，用新的值替換原來的值，符合數據一旦創建就不發生變化的原則。

總結

在 react 應用中，更新 state 必須滿足 Immutability 原則，因為 React.memo、PureComponent shouldComponentUpdate 和 React Hooks 通過淺比較確定 state 是否發生變更，如果變更 state 的方式不滿足 Immutability 原則，它們會認為 state 的值沒有變化。

在更新 state 並重新渲染時，React 會將類組件的 this.setState 與函數組件的 useState、useReducer hooks 區別對待。在函數組件中，React 要求所有 hooks 更新狀態必須返回一個新的引用作為狀態值，如果 React 發現狀態更新來自 hook，它會檢查該值的引用是否與以前的引用相同，如果相同，它將退出該函數組件的渲染流程，最終用戶界面不更新。使用 this.setState 更新類的 state，React 並不關心狀態的引用是否變化，隻要在類組件中調用 this.setState，該組件一定會重新渲染。

以上就是React 狀態的不變性實例詳解的詳細內容，更多關於React 狀態不變性的資料請關註WalkonNet其它相關文章！

推薦閱讀：