建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
每個(gè)React應(yīng)用都是由交互組件組成的。這些組件如何通信是UI體系結(jié)構(gòu)的一個(gè)重要一環(huán)。隨著應(yīng)用程序變得更大、更復(fù)雜，組件交互變得更加重要。
創(chuàng)新互聯(lián)建站主營(yíng)長(zhǎng)汀網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP軟件開(kāi)發(fā),長(zhǎng)汀h5成都小程序開(kāi)發(fā)搭建,長(zhǎng)汀網(wǎng)站營(yíng)銷(xiāo)推廣歡迎長(zhǎng)汀等地區(qū)企業(yè)咨詢(xún)
React提供了多種方法來(lái)處理這種需求，每種方法都有其相應(yīng)的用例。這次讓我們從最簡(jiǎn)單的親子互動(dòng)方法開(kāi)始。
?[[383878]]?
親子與道具
組件之間最簡(jiǎn)單的通信形式是通過(guò)屬性——通常稱(chēng)為道具（Props）。Props是由父組件傳遞給子組件的參數(shù)，類(lèi)似于函數(shù)的參數(shù)。
Props允許將變量傳遞給子節(jié)點(diǎn)，當(dāng)值發(fā)生更改時(shí)，它們會(huì)在子節(jié)點(diǎn)中自動(dòng)更新，如Listing 1所示。
Listing 1. Props (class-based)：
function App(){
return
}
function AppChild(props){
return
My name is {props.name}
}
ReactDOM.render(Listing 1顯示了如何在基于函數(shù)的組件樹(shù)中處理props。這個(gè)過(guò)程與類(lèi)類(lèi)似。這個(gè)基于函數(shù)的示例展示了函數(shù)樣式的更精簡(jiǎn)的語(yǔ)法。
帶功能道具的子-父組件
Listing 1允許將值從父級(jí)傳遞給子級(jí)。當(dāng)子節(jié)點(diǎn)需要更新父節(jié)點(diǎn)的變更時(shí)，它們不能僅修改屬性。
如果你試圖直接修改子進(jìn)程的prop，你會(huì)在控制臺(tái)中看到以下類(lèi)型的錯(cuò)誤:
Uncaught TypeError: Cannot assign to read only property 'foo' of 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
{setName("John")}}/>
}
function AppChild(props){
return
My name is {props.name}
}
ReactDOM.render(Listing 2介紹了用于管理狀態(tài)的useState。這是一個(gè)簡(jiǎn)單的機(jī)制。functional prop的本質(zhì)是當(dāng)按鈕被點(diǎn)擊時(shí)，App組件傳入的函數(shù)就會(huì)被執(zhí)行。這樣，就實(shí)現(xiàn)了子-父通信。
總的來(lái)說(shuō)，要記住的概念是：道具流向子級(jí)，事件流向父級(jí)。這是一個(gè)有價(jià)值的設(shè)計(jì)原則，有助于保持應(yīng)用程序的組織性和可管理性。
向父級(jí)傳遞信息
通常情況下，子組件需要隨它們的事件一起傳遞參數(shù)。這可以通過(guò)向函數(shù)道具回調(diào)添加參數(shù)來(lái)實(shí)現(xiàn)。如Listing 3所示。
function App(){
const [name, setName] = React.useState("Matt"); //test
return
{setName(newName)}}/>
}
function AppChild(props){
return
My name is {props.name}
}
ReactDOM.render(注意 Listing 3中的 onClick={()=>props.onChangeName("Bill")}行。這里，我們使用箭頭語(yǔ)法創(chuàng)建一個(gè)匿名函數(shù)，其中包含我們想要的參數(shù)。傳遞一個(gè)由組件本身修改的變量也很簡(jiǎn)單，語(yǔ)法如下：onClick={(myVar)=>prop . onchange (myVar)}。
順便說(shuō)明一下，作為事件處理程序的內(nèi)聯(lián)箭頭函數(shù)有時(shí)會(huì)因?yàn)樾阅軉?wèn)題而受到批評(píng)，盡管這可能被夸大其詞。
功能道具和React Router
另一個(gè)重要的用例是在 React Router 之間傳遞參數(shù)。Listing 4提供了如何實(shí)現(xiàn)這一點(diǎn)的示例。
Listing 4. Passing functional props through Router
// In the route definition:} />
// In the child component:
從本質(zhì)上講，Listing 4通過(guò)覆蓋路由的呈現(xiàn)方式允許直接傳遞屬性。
同級(jí)溝通
到目前為止，我們看到的特性提供了處理同級(jí)通信的能力。這在React文檔中被稱(chēng)為“提升狀態(tài)”。
這里的思想是，當(dāng)組件樹(shù)的同一級(jí)別的子組件必須共享狀態(tài)時(shí)，該狀態(tài)將被推入父組件。然后父級(jí)通過(guò)道具將狀態(tài)分享給需要它的子級(jí)。子節(jié)點(diǎn)引發(fā)事件以更新父節(jié)點(diǎn)的狀態(tài)，這將自動(dòng)在共享屬性中反映出來(lái)。
React Context API
React本身提供的另一個(gè)選項(xiàng)是Context API。Context API被設(shè)計(jì)用來(lái)管理簡(jiǎn)單的、有全局意義的值。也就是說(shuō)，這些值被應(yīng)用程序中的許多組件使用。
文檔中給出的示例是一個(gè)主題設(shè)置。許多組件將會(huì)對(duì)這種設(shè)置感興趣(為了反映適當(dāng)?shù)闹黝})，這與道具一起傳遞非常困難。
Context API不用于處理復(fù)雜的應(yīng)用程序數(shù)據(jù)，它是專(zhuān)門(mén)針對(duì)在深度嵌套的組件中避免復(fù)雜的道具處理的。Listing 5給出了一個(gè)簡(jiǎn)單的示例。
Listing 5. Context API
// defining the context value
// Consuming the context value later on
;
Redux的集中狀態(tài)
更復(fù)雜的應(yīng)用程序可能需要更復(fù)雜的狀態(tài)架構(gòu)。在React中處理這個(gè)問(wèn)題最常見(jiàn)的庫(kù)仍然是Redux。Redux不僅僅是一個(gè)集中式存儲(chǔ)，它更是一個(gè)自以為是的結(jié)構(gòu)化事件系統(tǒng)。
Redux的核心思想是，組件通過(guò)稱(chēng)為dispatchers的特殊對(duì)象引發(fā)事件(在Redux中稱(chēng)為動(dòng)作)。這些動(dòng)作事件由reducer觀察到，然后reducer將動(dòng)作應(yīng)用到狀態(tài)。然后，視圖中的組件會(huì)自動(dòng)更新以反映狀態(tài)。
從這段簡(jiǎn)短的描述可以看出，Redux為您的應(yīng)用程序引入了相當(dāng)多的復(fù)雜性和正式性。在使用Redux時(shí)，這應(yīng)該與結(jié)構(gòu)化和可理解性的好處進(jìn)行謹(jǐn)慎的平衡。
還有其他管理集中商店的方法，包括MobX等。盡管這些解決方案可能比Redux有優(yōu)勢(shì)，但必須權(quán)衡Redux的流行所帶來(lái)的優(yōu)勢(shì)，即熟悉度和了解它的開(kāi)發(fā)人員的可用性。
React通過(guò)props和function props提供了非常強(qiáng)大和簡(jiǎn)單的組件交互。在更大，更復(fù)雜的應(yīng)用程序中，這種方法可能會(huì)崩潰。利用諸如Context API和Redux之類(lèi)的更復(fù)雜的選項(xiàng)可以解決這些更復(fù)雜的需求。
【譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為.com】
文章名稱(chēng)：如何在React中處理組件交互？
網(wǎng)站網(wǎng)址：http://www.5511xx.com/article/coggohg.html
