【51CTO.com快譯】每個(gè)React應(yīng)用都是由交互組件組成的。這些組件如何通信是UI體系結(jié)構(gòu)的一個(gè)重要一環(huán)。隨著應(yīng)用程序變得更大、更復(fù)雜，組件交互變得更加重要。

React提供了多種方法來處理這種需求，每種方法都有其相應(yīng)的用例。這次讓我們從最簡單的親子互動方法開始。

?[[383878]]?

親子與道具

組件之間最簡單的通信形式是通過屬性——通常稱為道具（Props）。Props是由父組件傳遞給子組件的參數(shù)，類似于函數(shù)的參數(shù)。

Props允許將變量傳遞給子節(jié)點(diǎn)，當(dāng)值發(fā)生更改時(shí)，它們會在子節(jié)點(diǎn)中自動更新，如Listing 1所示。

Listing 1. Props (class-based)：

function App(){
return <div>
<AppChild name="Matt" />
</div>
}

function AppChild(props){
return <span>
My name is {props.name}
</span>
}

ReactDOM.render(<App />, document.getElementById('app'));

Listing 1顯示了如何在基于函數(shù)的組件樹中處理props。這個(gè)過程與類類似。這個(gè)基于函數(shù)的示例展示了函數(shù)樣式的更精簡的語法。

帶功能道具的子-父組件

Listing 1允許將值從父級傳遞給子級。當(dāng)子節(jié)點(diǎn)需要更新父節(jié)點(diǎn)的變更時(shí)，它們不能僅修改屬性。

如果你試圖直接修改子進(jìn)程的prop，你會在控制臺中看到以下類型的錯(cuò)誤:

Uncaught TypeError: Cannot assign to read only property 'foo' of object '#<Object>'

相反，父進(jìn)程可以傳入一個(gè)功能性道具，子進(jìn)程可以調(diào)用這個(gè)函數(shù)。這種功能道具是一種面向事件的編程。您可以在Listing 2中看到這一點(diǎn)。

Listing 2. Functional props

function App(){
const [name, setName] = React.useState("Matt");
return <div>
<AppChild name={name} onChangeName={()=>{setName("John")}}/>
</div>
}

function AppChild(props){
return <span>
My name is {props.name}
<button onClick={props.onChangeName}>Change Name</button>
</span>
}

ReactDOM.render(<App />, document.getElementById('app'));

Listing 2介紹了用于管理狀態(tài)的useState。這是一個(gè)簡單的機(jī)制。functional prop的本質(zhì)是當(dāng)按鈕被點(diǎn)擊時(shí)，App組件傳入的函數(shù)就會被執(zhí)行。這樣，就實(shí)現(xiàn)了子-父通信。

總的來說，要記住的概念是：道具流向子級，事件流向父級。這是一個(gè)有價(jià)值的設(shè)計(jì)原則，有助于保持應(yīng)用程序的組織性和可管理性。

向父級傳遞信息

通常情況下，子組件需要隨它們的事件一起傳遞參數(shù)。這可以通過向函數(shù)道具回調(diào)添加參數(shù)來實(shí)現(xiàn)。如Listing 3所示。

function App(){
const [name, setName] = React.useState("Matt"); //test
return <div>
<AppChild name={name} onChangeName={(newName)=>{setName(newName)}}/>
</div>
}

function AppChild(props){
return <span>
My name is {props.name}
<button onClick={()=>props.onChangeName("Bill")}>Change Name</button>
</span>
}

ReactDOM.render(<App />, document.getElementById('app'));

注意 Listing 3中的 onClick={()=>props.onChangeName("Bill")}行。這里，我們使用箭頭語法創(chuàng)建一個(gè)匿名函數(shù)，其中包含我們想要的參數(shù)。傳遞一個(gè)由組件本身修改的變量也很簡單，語法如下：onClick={(myVar)=>prop . onchange (myVar)}。

順便說明一下，作為事件處理程序的內(nèi)聯(lián)箭頭函數(shù)有時(shí)會因?yàn)樾阅軉栴}而受到批評，盡管這可能被夸大其詞。

功能道具和React Router

另一個(gè)重要的用例是在 React Router 之間傳遞參數(shù)。Listing 4提供了如何實(shí)現(xiàn)這一點(diǎn)的示例。

Listing 4. Passing functional props through Router

// In the route definition:
<Route path=’/foopath’ render={(props) => <Child {…props} />} />
// In the child component:
<Route appProps={{ onTitleChange }} />

從本質(zhì)上講，Listing 4通過覆蓋路由的呈現(xiàn)方式允許直接傳遞屬性。

同級溝通

到目前為止，我們看到的特性提供了處理同級通信的能力。這在React文檔中被稱為“提升狀態(tài)”。

這里的思想是，當(dāng)組件樹的同一級別的子組件必須共享狀態(tài)時(shí)，該狀態(tài)將被推入父組件。然后父級通過道具將狀態(tài)分享給需要它的子級。子節(jié)點(diǎn)引發(fā)事件以更新父節(jié)點(diǎn)的狀態(tài)，這將自動在共享屬性中反映出來。

React Context API

React本身提供的另一個(gè)選項(xiàng)是Context API。Context API被設(shè)計(jì)用來管理簡單的、有全局意義的值。也就是說，這些值被應(yīng)用程序中的許多組件使用。

文檔中給出的示例是一個(gè)主題設(shè)置。許多組件將會對這種設(shè)置感興趣(為了反映適當(dāng)?shù)闹黝})，這與道具一起傳遞非常困難。

Context API不用于處理復(fù)雜的應(yīng)用程序數(shù)據(jù)，它是專門針對在深度嵌套的組件中避免復(fù)雜的道具處理的。Listing 5給出了一個(gè)簡單的示例。

Listing 5. Context API

// defining the context value
<ThemeContext.Provider value="dark">
// Consuming the context value later on
<Button theme={this.context} />;

Redux的集中狀態(tài)

更復(fù)雜的應(yīng)用程序可能需要更復(fù)雜的狀態(tài)架構(gòu)。在React中處理這個(gè)問題最常見的庫仍然是Redux。Redux不僅僅是一個(gè)集中式存儲，它更是一個(gè)自以為是的結(jié)構(gòu)化事件系統(tǒng)。

Redux的核心思想是，組件通過稱為dispatchers的特殊對象引發(fā)事件(在Redux中稱為動作)。這些動作事件由reducer觀察到，然后reducer將動作應(yīng)用到狀態(tài)。然后，視圖中的組件會自動更新以反映狀態(tài)。

從這段簡短的描述可以看出，Redux為您的應(yīng)用程序引入了相當(dāng)多的復(fù)雜性和正式性。在使用Redux時(shí)，這應(yīng)該與結(jié)構(gòu)化和可理解性的好處進(jìn)行謹(jǐn)慎的平衡。

還有其他管理集中商店的方法，包括MobX等。盡管這些解決方案可能比Redux有優(yōu)勢，但必須權(quán)衡Redux的流行所帶來的優(yōu)勢，即熟悉度和了解它的開發(fā)人員的可用性。

React通過props和function props提供了非常強(qiáng)大和簡單的組件交互。在更大，更復(fù)雜的應(yīng)用程序中，這種方法可能會崩潰。利用諸如Context API和Redux之類的更復(fù)雜的選項(xiàng)可以解決這些更復(fù)雜的需求。

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】