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

newtrek 發(fā)布于2019-08-21 17:34 / 640人閱讀

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

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

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

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

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

上一個評論功能的案例中，可能會有些同學(xué)會對一個地方感到疑惑： CommentList 中顯示的評論列表數(shù)據(jù)為什么要通過父組件 CommentApp 用 props 傳進來？為什么不直接存放在 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) =>
          
        )}
      
    )
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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