React.js 小書 Lesson17 - 前端應用狀態管理 —— 狀態提升

newtrek 發布于2019-08-21 17:34 / 650人閱讀

摘要：在實際項目當中狀態提升并不是一個好的解決方案，所以我們后續會引入這樣的狀態管理工具來幫助我們來管理這種共享狀態，但是在講解到之前，我們暫時采取狀態提升的方式來進行管理。

React.js 小書 Lesson17 - 前端應用狀態管理 —— 狀態提升

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson17

轉載請注明出處，保留原文鏈接以及作者信息

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

上一個評論功能的案例中，可能會有些同學會對一個地方感到疑惑： CommentList 中顯示的評論列表數據為什么要通過父組件 CommentApp 用 props 傳進來？為什么不直接存放在 CommentList 的 state 當中？例如這樣做也是可以的：

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) =>
          
        )}
      
    )
  }
}

如果把這個 comments 放到 CommentList 當中，當有別的組件也依賴這個 comments 數據或者有別的組件會影響這個數據，那么就帶來問題了。舉一個數據依賴的例子：例如，現在我們有另外一個和 CommentList 同級的 CommentList2 ，也是需要顯示同樣的評論列表數據。

CommentList2 和 CommentList 并列為 CommentApp 的子組件，它也需要依賴 comments 顯示評論列表。但是因為 comments 數據在 CommentList 中，它沒辦法訪問到。

遇到這種情況，我們將這種組件之間共享的狀態交給組件最近的公共父節點保管，然后通過 props 把狀態傳遞給子組件，這樣就可以在組件之間共享數據了。

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

但是這個 CommentList2 是我們臨時加上去的，在實際案例當中并沒有涉及到這種組件之間依賴 comments 的情況，為什么還需要把 comments 提升到 CommentApp？那是因為有個組件會影響到 comments ，那就是 CommentInput。CommentInput 產生的新的評論數據是會插入 comments 當中的，所以我們遇到這種情況也會把狀態提升到父組件。

總結一下：當某個狀態被多個組件依賴或者影響的時候，就把該狀態提升到這些組件的最近公共父組件中去管理，用 props 傳遞數據或者函數來管理這種依賴或著影響的行為。

我們來看看狀態提升更多的例子，假設現在我們的父組件 CommentApp 只是屬于更大的組件樹 PostApp 的一部分：

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

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

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

如何更好的管理這種被多個組件所依賴或影響的狀態？

你可以看到 React.js 并沒有提供好的解決方案來管理這種組件之間的共享狀態。在實際項目當中狀態提升并不是一個好的解決方案，所以我們后續會引入 Redux 這樣的狀態管理工具來幫助我們來管理這種共享狀態，但是在講解到 Redux 之前，我們暫時采取狀態提升的方式來進行管理。

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

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

GPU云服務器云服務器狀態管理應用程序運行狀態監控 asp狀態管理系統工作狀態

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89686.html

寫一本關于 React.js 的小書

摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評論0 收藏0
React.js 小書 Lesson16 - 實戰分析：評論功能（三）

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

Gilbertat 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson12 - state vs props

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

call_me_R 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson3 - 前端組件化（二）：優化 DOM 操作

摘要：一個組件的顯示形態由多個狀態決定的情況非常常見。我們順利地消除了手動的操作。非一般的暴力，因為每次都重新構造新增刪除元素，會導致瀏覽器進行大量的重排，嚴重影響性能。下一節小書前端組件化三抽象出公共組件類我們把這個通用模式抽離到一個類當中。 React.js 小書 Lesson3 - 前端組件化（二）：優化 DOM 操作本文作者：胡子大哈本文原文：http://huziketang....

Drinkey 2019-08-21 17:32 評論0 收藏0
React.js 小書 Lesson5 - React.js 基本環境安裝

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

zilu 2019-08-21 17:32 評論0 收藏0