React的使用：React組件內(nèi)部的狀態(tài)管理

在本文中，我們將把目光聚焦于 React 組件內(nèi)部的狀態(tài)管理，去認(rèn)識或重新思考以下三個核心概念：

1. props 和 state

2. 函數(shù)組件

3. 類組件

讓我們開始吧！

01. React 中的數(shù)據(jù)

站在“組件”的角度上，React 把應(yīng)用中流動的數(shù)據(jù)分為兩種類型：

不可更改內(nèi)容，但可以單向跨組件傳遞的 props；

可以更改內(nèi)容，但不能跨組件傳遞的 state；

進(jìn)一步說，props 和 state 的區(qū)別在于，props 是外部的，并且被任何渲染這個組件的代碼所控制。而 state 則是內(nèi)部的，并且被組件自身所控制。

非計算機(jī)專業(yè)的初學(xué)者經(jīng)常困惑 props 和 state 在名稱與含義上的關(guān)聯(lián)，其實(shí)大可不必在意，他們本質(zhì)上只是數(shù)據(jù)的別稱，只是在 React 中，它們被各自賦予了特殊的限制或能力。

你可以通過組件上的 props 屬性，像在 HTML 中傳遞屬性一樣，將你想要傳遞的任何數(shù)據(jù)傳遞給子組件，所有的屬性都會被存儲在子組件（類組件）的 this.props 對象中。

function Parent(props) { 
return <Child name={"Tom"} />
}function Child(props) { 
return <span>(props.name)</span>
}

02. 函數(shù)組件

我們之前提到過，React 使用組件渲染視圖提升性能，而組件即是一個函數(shù)，可以用一個公式來簡潔的表示其功用：f(數(shù)據(jù)) => UI。到這里我想你應(yīng)該注意到了，為什么我們說 React 并不是一個大型的 MVC （或 MVVM）框架，因?yàn)?React 只負(fù)責(zé)視圖層（View）的渲染，其他的事情將由 React 生態(tài)中的其他工具來完成。

話說回來，對于 React 組件而言，最簡單的一種形式莫過于函數(shù)組件了，它充分展現(xiàn)了 React 的哲學(xué)，一次只做一件事，組件化和數(shù)據(jù)驅(qū)動UI。

函數(shù)組件又稱為“無狀態(tài)組件”，“受控組件”或“木偶組件”，因?yàn)楹瘮?shù)組件只負(fù)責(zé)接收 props 并返回 UI，它自身并不能擁有可改變的數(shù)據(jù)，在真實(shí)的 React 應(yīng)用開發(fā)場景下，我們經(jīng)常盡可能的使用函數(shù)組件，將整個應(yīng)用的 UI 拆分成盡可能小的視覺單元。

這是因?yàn)楹瘮?shù)組件是非常直觀的，它接收屬性返回元素，內(nèi)部邏輯清晰明確，而且更重要的是，函數(shù)組件內(nèi)沒有 this 關(guān)鍵字，因此你永遠(yuǎn)不用擔(dān)心煩人的“this上下文問題”。

記住：如果你的組件不需要追蹤內(nèi)部狀態(tài)，盡量使用函數(shù)組件。

03. 類組件

和函數(shù)組件相對應(yīng)的，便是“類組件”了，類似的，它也被稱為“有狀態(tài)組件”，“非受控組件”和“容器組件”。這里需要注意，雖然我們按照代碼的形式為兩種類型的組件命名，但這并不嚴(yán)謹(jǐn)，因?yàn)樵?JavaScript 中，“類”也是函數(shù)。

不同于函數(shù)組件，類組件擁有著可以更改的內(nèi)部數(shù)據(jù) -- state。它最終影響著頁面的渲染情況，而且 state 可以被組件在任何時刻在內(nèi)部修改。通常的時刻時用戶與界面發(fā)生交互的時候。

由于 React 把變化的數(shù)據(jù)封裝在組件內(nèi)部，并堅持單向數(shù)據(jù)流的原則。我們有了高度抽象的 UI 組件，并封裝復(fù)雜的業(yè)務(wù)邏輯。這使得我們可以通過構(gòu)建，組合一系列小組件開發(fā)出大型應(yīng)用。

那么應(yīng)該如何向類組件添加 state 呢？很簡單，我們所要做的只是在類組件內(nèi)部添加一個 state 屬性，state 屬性是一個對象。這個對象代表了組件的狀態(tài)，對象的每一個屬性名都代表組件的一個特定的狀態(tài)，下面是具體的代碼：

import React from "react"class Parent extends React.Component {
 state = {
 name: "Eliot",
 }
 
 render() { return <p>{this.state.name}</p>
 }
}

React 使我們迫使大腦關(guān)注兩個重要的部分：

組件看起來是什么樣？

組件當(dāng)前的狀態(tài)是什么？

通過讓組件管理自己的狀態(tài)，任何時候狀態(tài)的變更都會令 React 自動更新相應(yīng)的頁面部分。這便是使用 React 構(gòu)建組件的主要優(yōu)勢之一：當(dāng)頁面需要重新渲染時，我們僅僅需要思考的是如何更改狀態(tài)。我們不必跟蹤頁面的哪些部分需要更改，不需要決定如何有效的重新呈現(xiàn)頁面，React 自會比較先前的輸出和新的輸出，決定什么應(yīng)該發(fā)生改變，并為我們做出決定。而這個確定之前改變了什么和現(xiàn)在應(yīng)該新輸出什么的過程有一個專門的名詞，叫做 Reconciliation。

04. 修改 state

你應(yīng)該還記得類組件與函數(shù)組件最大的不同在于類組件自身擁有可以改變內(nèi)部數(shù)據(jù)的能力。那么如何行使這一能力呢？和直覺不同，要做到這一點(diǎn)，你需要使用 React 提供的專門的 API：this.setState()。

你有兩種方式使用該 API：

設(shè)置對象參數(shù)；

設(shè)置函數(shù)參數(shù)；

讓我們先來看看第一種：

this.setState({ name: "Tom"})

React 會自動合并對 state 的改變。而有時，你的組件需要一個新的 state ，而這個 state 的變化又依賴于舊的 state值，每當(dāng)這種時候，你就該使用第二種 API 調(diào)用方式：

this.setState((prevState) => ({
 name: "mr." + prevState.name
}))

講到這里你可能會感到奇怪，只是更新 state 而已，為什么還需要調(diào)用一個專門的 API？我們直接修改之前定義的 state對象不就好了嗎？之所以這樣設(shè)計的原因是，組件內(nèi) state 的變化不僅僅是對象屬性值發(fā)生變化那么簡單，它還需要驅(qū)動整個 UI 進(jìn)行重新渲染，因此 this.setState() 這個 API 被調(diào)用時實(shí)際上做了兩件事：

修改 state 對象；

驅(qū)動組件重新渲染；

如果你對 React 有一定研究，你可能會質(zhì)疑我以上所羅列的兩點(diǎn)并不精確，的確如此，小小的 this.setState() API 其實(shí)內(nèi)部還有很多細(xì)節(jié)值得注意，例如，當(dāng)調(diào)用 this.setState() 時并不會立即改變 state 的值，也當(dāng)然不會立即重新渲染組件。例如，當(dāng)以對象為參數(shù)調(diào)用 this.setState() API 時，盡管內(nèi)部重復(fù)為數(shù)據(jù)賦值，最終的數(shù)據(jù)也只保留最后一次更改的結(jié)果。

不過幸好，這些略顯古怪的狀態(tài)早有前人為我們做了詳盡的解釋，如果你感興趣，請點(diǎn)擊下方鏈接查詢更多的信息：

setState：這個API設(shè)計到底怎么樣

問一個react更新State的問題？

05. 控制組件

當(dāng)你在 Web 應(yīng)用中使用表單時，這個表單的數(shù)據(jù)被存儲于相應(yīng)的 DOM 節(jié)點(diǎn)內(nèi)部，但正如我們之前提到的，React 的整個關(guān)鍵點(diǎn)就在于如何高效的管理應(yīng)用內(nèi)的狀態(tài)。所以雖然表單的數(shù)據(jù)被存儲于 DOM 中，React 依然可以對它進(jìn)行狀態(tài)管理。

而管理的方式即是使用“控制組件”。簡單而言，“控制組件”會渲染出一個表單，但是將表單所需的所有真實(shí)數(shù)據(jù)作為 state 存儲于組件內(nèi)部，而不是 DOM 中。

之所以被稱為“控制組件”的原因也即在于此，“控制組件”控制著組件內(nèi)的表單數(shù)據(jù)，因此，唯一更新表單數(shù)據(jù)的方式就是更新組件內(nèi)部對應(yīng)的 state 值。

import React as "react"class Input extends React.Component {
 state = {
 value: "enter something...",
 }
 
 handleClick: (e) => { this.setState({value: e.target.value})
 }
 
 render() {
 <input value={this.state.value} onKeyup={this.handleClick} />
 }
}

可以看到，我們使用 handleClick 方法響應(yīng)用戶每一次鍵盤敲擊以即時更新表單狀態(tài)，這樣做不僅天然的支持了即時的輸入驗(yàn)證，還允許你有條件的禁止或點(diǎn)亮表單按鈕。

06. 小結(jié)

這篇文章我們介紹了 React 的兩種數(shù)據(jù)形式：state 和 props，并且介紹了 React 組件的兩種形式：函數(shù)組件與類組件，希望各位有所收獲。

相關(guān)推薦：

react的使用： React如何渲染UI

React的使用：react框架的五大特點(diǎn)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com