欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React 狀態(tài)的不變性實例詳解

 更新時間:2022年11月13日 11:48:48   作者:何遇er  
這篇文章主要為大家介紹了React 狀態(tài)的不變性實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

正文

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

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

什么是 immutable

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

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

上述代碼第 2 行和第 3 行都屬于改變原來的值,只有第四行是新建一個對象,用新對象替換原來的對象。下面調(diào)用函數(shù)進一步說明 immutable 與 mutable。

function addAgeMutable(user: User) {
    user.age = 12 // 修改原來的
    return user
}
function addAgeImmutable(user: User) {
    const other = Object.assign({}, user) // 創(chuàng)建新的
    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 函數(shù)直接在入?yún)⑸闲略?age 屬性,但 addAgeImmutable 函數(shù)沒有改變?nèi)雲(yún)ⅲ切陆艘粋€對象,在新對象上添加age屬性。

總結(jié)一下,immutable 是指不修改原來的;mutable 是指在原來的基礎(chǔ)上修改。通過 mutable 的方式修改變量會導致修改前后變量的引用不變。某些操作數(shù)組的方法會讓原來的數(shù)組發(fā)生變化,比如:push/pop/shift/unshift/splice,這些方法是 mutable 的,而有一些操作數(shù)組的方法不會讓原來的數(shù)組發(fā)生變化,而是返回一個新組件,比如:slice/concat,這些函數(shù)是 immutable 的。字符串、布爾值和數(shù)值操作都不改變原來的值,而是創(chuàng)建一個新的值。

React 與 Immutability

在 React 程序中,組件的 state 必須具備不變性,接下來演示修改state的正確與不正確的方式。為了說明state的組成結(jié)構(gòu),先定義個State接口,代碼如下:

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

從上述接口可以看出,組件有三個狀態(tài),分別為:user、hobbies 和 time,它們的數(shù)據(jù)類型各不相同。

修改 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 的內(nèi)部結(jié)構(gòu),修改前后 user 的引用不變。
  • 案例二: 錯誤使用 Object.assign,Object.assign 將第二個參數(shù)的屬性合并到第一個參數(shù)上,然后將第一個參數(shù)返回,這意味著案例二還是修改了user的內(nèi)部結(jié)構(gòu),修改前后user的引用不變。
  • 案例三: 使用reverse將數(shù)組翻轉(zhuǎn),它翻轉(zhuǎn)的是原數(shù)組,翻轉(zhuǎn)前后數(shù)據(jù)的引用不變。
  • 案例四: 修改hobbies的長度,修改前后hobbies的引用一樣。

上述四個案例都不符合數(shù)據(jù)一旦創(chuàng)建就不發(fā)生變化的原則,由于調(diào)用了 setState 方法,所以對于用 React.Component 創(chuàng)建的組件而言,不會發(fā)生故障,對于用 React.PureComponent 創(chuàng)建的組件,會引發(fā)故障,即:界面不更新。

修改 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: []
    })

上述案例都是新建一個值,用新的值替換原來的值,符合數(shù)據(jù)一旦創(chuàng)建就不發(fā)生變化的原則。

總結(jié)

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

在更新 state 并重新渲染時,React 會將類組件的 this.setState 與函數(shù)組件的 useState、useReducer hooks 區(qū)別對待。在函數(shù)組件中,React 要求所有 hooks 更新狀態(tài)必須返回一個新的引用作為狀態(tài)值,如果 React 發(fā)現(xiàn)狀態(tài)更新來自 hook,它會檢查該值的引用是否與以前的引用相同,如果相同,它將退出該函數(shù)組件的渲染流程,最終用戶界面不更新。使用 this.setState 更新類的 state,React 并不關(guān)心狀態(tài)的引用是否變化,只要在類組件中調(diào)用 this.setState,該組件一定會重新渲染。

以上就是React 狀態(tài)的不變性實例詳解的詳細內(nèi)容,更多關(guān)于React 狀態(tài)不變性的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • React?Streaming?SSR原理示例深入解析

    React?Streaming?SSR原理示例深入解析

    這篇文章主要為大家介紹了React?Streaming?SSR原理示例深入解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • react-redux的connect與React.forwardRef結(jié)合ref失效的解決

    react-redux的connect與React.forwardRef結(jié)合ref失效的解決

    這篇文章主要介紹了react-redux的connect與React.forwardRef結(jié)合ref失效的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • 詳解react-redux插件入門

    詳解react-redux插件入門

    這篇文章主要介紹了詳解react-redux插件入門,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • React開啟代理的2種實用方式

    React開啟代理的2種實用方式

    最近有不少伙伴詢問react的代理配置,自己也去試驗了一下發(fā)現(xiàn)不少的問題,在這就將所遇到的心得分享出來,這篇文章主要給大家介紹了關(guān)于React開啟代理的2種實用方式的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • 解決React報錯You provided a `checked` prop to a form field

    解決React報錯You provided a `checked` prop&n

    這篇文章主要為大家介紹了React報錯You provided a `checked` prop to a form field的解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • React 添加引用路徑時如何使用@符號作為src文件

    React 添加引用路徑時如何使用@符號作為src文件

    這篇文章主要介紹了React 添加引用路徑時如何使用@符號作為src文件,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-06-06
  • React利用路由實現(xiàn)登錄界面的跳轉(zhuǎn)

    React利用路由實現(xiàn)登錄界面的跳轉(zhuǎn)

    這篇文章主要介紹了React利用路由實現(xiàn)登錄界面的跳轉(zhuǎn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-04-04
  • React服務端渲染和同構(gòu)的實現(xiàn)

    React服務端渲染和同構(gòu)的實現(xiàn)

    本文主要介紹了React服務端渲染和同構(gòu)的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-04-04
  • react-redux中connect的裝飾器用法@connect詳解

    react-redux中connect的裝飾器用法@connect詳解

    這篇文章主要介紹了react-redux中connect的裝飾器用法@connect詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • React源碼state計算流程和優(yōu)先級實例解析

    React源碼state計算流程和優(yōu)先級實例解析

    這篇文章主要為大家介紹了React源碼state計算流程和優(yōu)先級實例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11

最新評論