亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React.js 小書 Lesson17 - 前端應(yīng)用狀態(tài)管理 —— 狀態(tài)提升

newtrek / 695人閱讀

摘要：在實(shí)際項(xiàng)目當(dāng)中狀態(tài)提升并不是一個(gè)好的解決方案，所以我們后續(xù)會(huì)引入這樣的狀態(tài)管理工具來幫助我們來管理這種共享狀態(tài)，但是在講解到之前，我們暫時(shí)采取狀態(tài)提升的方式來進(jìn)行管理。

React.js 小書 Lesson17 - 前端應(yīng)用狀態(tài)管理 —— 狀態(tài)提升 
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson17

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

上一個(gè)評(píng)論功能的案例中，可能會(huì)有些同學(xué)會(huì)對(duì)一個(gè)地方感到疑惑： CommentList 中顯示的評(píng)論列表數(shù)據(jù)為什么要通過父組件 CommentApp 用 props 傳進(jìn)來？為什么不直接存放在 CommentList 的 state 當(dāng)中？例如這樣做也是可以的：

class CommentList extends Component {
  constructor () {
    this.state = { comments: [] }
  }

  addComment (comment) {
    this.state.comments.push(comment)
    this.setState({
      comments: this.state.comments
    })
  }

  render() {
    return (
      

        {this.state.comments.map((comment, i) =>
          
        )}
      

    )
  }
}

如果把這個(gè) comments 放到 CommentList 當(dāng)中，當(dāng)有別的組件也依賴這個(gè) comments 數(shù)據(jù)或者有別的組件會(huì)影響這個(gè)數(shù)據(jù)，那么就帶來問題了。舉一個(gè)數(shù)據(jù)依賴的例子：例如，現(xiàn)在我們有另外一個(gè)和 CommentList 同級(jí)的 CommentList2 ，也是需要顯示同樣的評(píng)論列表數(shù)據(jù)。

CommentList2 和 CommentList 并列為 CommentApp 的子組件，它也需要依賴 comments 顯示評(píng)論列表。但是因?yàn)?comments 數(shù)據(jù)在 CommentList 中，它沒辦法訪問到。

遇到這種情況，我們將這種組件之間共享的狀態(tài)交給組件最近的公共父節(jié)點(diǎn)保管，然后通過 props 把狀態(tài)傳遞給子組件，這樣就可以在組件之間共享數(shù)據(jù)了。

在我們的例子當(dāng)中，如果把 comments 交給父組件 CommentApp ，那么 CommentList 和 CommentList2 都可以通過 props 獲取到 comments，React.js 把這種行為叫做“狀態(tài)提升”。

但是這個(gè) CommentList2 是我們臨時(shí)加上去的，在實(shí)際案例當(dāng)中并沒有涉及到這種組件之間依賴 comments 的情況，為什么還需要把 comments 提升到 CommentApp？那是因?yàn)橛袀€(gè)組件會(huì)影響到 comments ，那就是 CommentInput。CommentInput 產(chǎn)生的新的評(píng)論數(shù)據(jù)是會(huì)插入 comments 當(dāng)中的，所以我們遇到這種情況也會(huì)把狀態(tài)提升到父組件。

總結(jié)一下：當(dāng)某個(gè)狀態(tài)被多個(gè)組件依賴或者影響的時(shí)候，就把該狀態(tài)提升到這些組件的最近公共父組件中去管理，用 props 傳遞數(shù)據(jù)或者函數(shù)來管理這種依賴或著影響的行為。

我們來看看狀態(tài)提升更多的例子，假設(shè)現(xiàn)在我們的父組件 CommentApp 只是屬于更大的組件樹 PostApp 的一部分：

而這個(gè)更大的組件樹的另外的子樹的 CommentsCount 組件也需要依賴 comments 來顯示評(píng)論數(shù)，那我們就只能把 comments 繼續(xù)提升到這些依賴組件的最近公共父組件 PostApp 當(dāng)中。

現(xiàn)在繼續(xù)讓我們的例子極端起來。假設(shè)現(xiàn)在 PostApp 只是另外一個(gè)更大的父組件 Index 的子樹。而 Index 的某個(gè)子樹的有一個(gè)按鈕組件可以一鍵清空所有 comments（也就是說，這個(gè)按鈕組件可以影響到這個(gè)數(shù)據(jù)），我們只能繼續(xù) commenets 提升到 Index 當(dāng)中。

你會(huì)發(fā)現(xiàn)這種無限制的提升不是一個(gè)好的解決方案。一旦發(fā)生了提升，你就需要修改原來保存這個(gè)狀態(tài)的組件的代碼，也要把整個(gè)數(shù)據(jù)傳遞路徑經(jīng)過的組件都修改一遍，好讓數(shù)據(jù)能夠一層層地傳遞下去。這樣對(duì)代碼的組織管理維護(hù)帶來很大的問題。到這里你可以抽象一下問題：

如何更好的管理這種被多個(gè)組件所依賴或影響的狀態(tài)？

你可以看到 React.js 并沒有提供好的解決方案來管理這種組件之間的共享狀態(tài)。在實(shí)際項(xiàng)目當(dāng)中狀態(tài)提升并不是一個(gè)好的解決方案，所以我們后續(xù)會(huì)引入 Redux 這樣的狀態(tài)管理工具來幫助我們來管理這種共享狀態(tài)，但是在講解到 Redux 之前，我們暫時(shí)采取狀態(tài)提升的方式來進(jìn)行管理。

對(duì)于不會(huì)被多個(gè)組件依賴和影響的狀態(tài)（例如某種下拉菜單的展開和收起狀態(tài)），一般來說只需要保存在組件內(nèi)部即可，不需要做提升或者特殊的管理。

下一節(jié)中我們將介紹《React.js 小書 Lesson18 - 掛載階段的組件生命周期（一）》。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89686.html

相關(guān)文章

  • 寫一本關(guān)于 React.js 的小書

    摘要：因?yàn)楣ぷ髦幸恢痹谑褂?，也一直以來想總結(jié)一下自己關(guān)于的一些知識(shí)經(jīng)驗(yàn)。于是把一些想法慢慢整理書寫下來，做成一本開源免費(fèi)專業(yè)簡(jiǎn)單的入門級(jí)別的小書，提供給社區(qū)。本書的后續(xù)可能會(huì)做成視頻版本，敬請(qǐng)期待。本作品采用署名禁止演繹國(guó)際許可協(xié)議進(jìn)行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...

    Scorpion 評(píng)論0 收藏0

  • React.js 小書 Lesson16 - 實(shí)戰(zhàn)分析：評(píng)論功能（三）

    摘要：但是給傳遞的評(píng)論數(shù)據(jù)并沒有傳遞給，所以現(xiàn)在發(fā)表評(píng)論時(shí)沒有反應(yīng)的。包括實(shí)現(xiàn)功能之前先理解分析需求，劃分組件。到此為止，小書的第一階段已經(jīng)結(jié)束，你可以利用這些知識(shí)點(diǎn)來構(gòu)建簡(jiǎn)單的功能模塊了。 React.js 小書 Lesson16 - 實(shí)戰(zhàn)分析：評(píng)論功能（三） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson16 轉(zhuǎn)載請(qǐng)注明出處...

    Gilbertat 評(píng)論0 收藏0

  • React.js 小書 Lesson12 - state vs props

    摘要：的主要作用是用于組件保存控制修改自己的可變狀態(tài)。它們都可以決定組件的行為和顯示形態(tài)。但是它們的職責(zé)其實(shí)非常明晰分明是讓組件控制自己的狀態(tài)，是讓外部對(duì)組件自己進(jìn)行配置。下一節(jié)中我們將介紹小書渲染列表數(shù)據(jù)。 React.js 小書 Lesson12 - state vs props 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesso...

    call_me_R 評(píng)論0 收藏0

  • React.js 小書 Lesson3 - 前端組件化（二）：優(yōu)化 DOM 操作

    摘要：一個(gè)組件的顯示形態(tài)由多個(gè)狀態(tài)決定的情況非常常見。我們順利地消除了手動(dòng)的操作。非一般的暴力，因?yàn)槊看味贾匦聵?gòu)造新增刪除元素，會(huì)導(dǎo)致瀏覽器進(jìn)行大量的重排，嚴(yán)重影響性能。下一節(jié)小書前端組件化三抽象出公共組件類我們把這個(gè)通用模式抽離到一個(gè)類當(dāng)中。 React.js 小書 Lesson3 - 前端組件化（二）：優(yōu)化 DOM 操作 本文作者：胡子大哈本文原文：http://huziketang....

    Drinkey 評(píng)論0 收藏0

  • React.js 小書 Lesson5 - React.js 基本環(huán)境安裝

    摘要：工具地址在安裝之前要確認(rèn)你的機(jī)器上安裝了環(huán)境包括。安裝好環(huán)境以后，只需要按照官網(wǎng)的指引安裝即可。所以可以把的源改成國(guó)內(nèi)的的源，這樣會(huì)加速下載過程。接下來我們會(huì)探討的組件的基本寫法小書使用描述信息。 React.js 小書 Lesson5 - React.js 基本環(huán)境安裝 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson5 ...

    zilu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<