摘要：作者滬江前端開(kāi)發(fā)工程師本文原創(chuàng)翻譯，有不當(dāng)?shù)牡胤綒g迎指出。管理數(shù)據(jù)，而提供服務(wù)器上的數(shù)據(jù)，因此應(yīng)用于處理網(wǎng)絡(luò)請(qǐng)求。結(jié)論使用建立的應(yīng)用都是模塊化的會(huì)成為其中一個(gè)模塊，庫(kù)是另一個(gè)模塊。原文原創(chuàng)新書(shū)移動(dòng)前端高效開(kāi)發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開(kāi)售。

作者：Oral （滬江Web前端開(kāi)發(fā)工程師）
本文原創(chuàng)翻譯，有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請(qǐng)指明出處。

當(dāng)你問(wèn)起有關(guān)AJAX與React時(shí)，老司機(jī)們首先就會(huì)告訴你：React其實(shí)是個(gè)沒(méi)有網(wǎng)絡(luò)請(qǐng)求/AJAX功能的view庫(kù)。這種說(shuō)法很容易理解，但對(duì)于當(dāng)你僅想讓你的React組件從服務(wù)器上獲取數(shù)據(jù)時(shí)，是沒(méi)啥幫助的。

事實(shí)上，有很多種方法可以滿足你的需求。也許你自己也腦洞大開(kāi)考慮過(guò)幾個(gè)，但一旦走錯(cuò)了方向，那代碼可就一團(tuán)糟了。

好吧，這下你好奇了：到底什么才是正確的、值得首選的方法呢？
答案是……看情況~~~

下面為大家一一介紹我收集的在React里使用AJAX的四個(gè)好方法。不過(guò)要注意的是，得根據(jù)app的大小及復(fù)雜度，和你已使用的庫(kù)和技術(shù)來(lái)決定該使用哪種方法。

這是一種最簡(jiǎn)單的方法，因此它適用于簡(jiǎn)單或小型的應(yīng)用。

通過(guò)這種方法，你可以建立單一根組件（父層組件）去分發(fā)所有AJAX請(qǐng)求，然后它會(huì)把AJAX響應(yīng)數(shù)據(jù)存儲(chǔ)進(jìn)state里，以props方式傳遞到子組件?？梢詤⒖枷鹿俜浇坛躺系膶?shí)例。

官方教程上的實(shí)例
https://facebook.github.io/re...

此實(shí)例中的CommentBox組件就是個(gè)分發(fā)所有AJAX請(qǐng)求的根組件。

不過(guò)，我不大喜歡官方教程實(shí)例中的一點(diǎn)：它使用了jQuery去發(fā)送AJAX請(qǐng)求。
jQuery是個(gè)有很多功能的大庫(kù)，因此僅因AJAX而引入它是沒(méi)多大意義的。

我推薦使用fetch()這個(gè)簡(jiǎn)單、標(biāo)準(zhǔn)化的JavaScript 網(wǎng)絡(luò)請(qǐng)求API，它已被Chrome、Firefox瀏覽器支持,并且可以通過(guò)使用fetch polyfill去兼容其他瀏覽器。如果想要更具體地了解，大家可以參考我的《AJAX庫(kù)之對(duì)比》，也許這對(duì)你選擇自己的AJAX庫(kù)有點(diǎn)幫助。

AJAX庫(kù)之對(duì)比
http://andrewhfarmer.com/ajax...

注意：如果你的項(xiàng)目有著很深的組件樹(shù)結(jié)構(gòu)（子組件層層嵌套下去），那么就會(huì)需要把數(shù)據(jù)從根組件一層一層傳遞至子組件，而這個(gè)傳遞數(shù)據(jù)之路將比較長(zhǎng)。

適宜使用root component 方法的場(chǎng)景：
1、項(xiàng)目組件樹(shù)比較簡(jiǎn)單
2、項(xiàng)目中沒(méi)有使用Redux或flux

容器組件就是“為展示組件或其它容器組件提供數(shù)據(jù)和方法的組件”，如果你還沒(méi)有聽(tīng)過(guò)這個(gè)概念，建議你可以先閱讀下Dan Abramov的有關(guān)展示組件和容器組件的文章。

展示組件和容器組件
https://medium.com/@dan_abram...

容器組件方法與根組件方法很像，不同的是容器組件可以支持多組件與服務(wù)器端交互。（根組件方法僅支持通過(guò)單一組件與服務(wù)器端交互）

容器組件方法是這樣工作的：對(duì)于每個(gè)需要從服務(wù)器拿到數(shù)據(jù)的展示組件來(lái)說(shuō)，需要有個(gè)可以發(fā)送網(wǎng)絡(luò)請(qǐng)求的容器組件來(lái)把請(qǐng)求到的數(shù)據(jù)通過(guò)props傳遞給子組件。

舉個(gè)具體的栗子：你想要展示一個(gè)有著name和picture的用戶簡(jiǎn)介。我們?cè)撛趺慈プ瞿?？接下?lái)，我們一步步來(lái)：

1.建立一個(gè)展示組件：, 這個(gè)組件可以接收到name 和profileImage 數(shù)據(jù)。但是這個(gè)組件一定不能有任何AJAX請(qǐng)求代碼。 2.建立組件 ,這個(gè)組件用來(lái)接收urserId .它請(qǐng)求到用戶的數(shù)據(jù)以后通過(guò)props傳遞給剛才創(chuàng)建的組件。

這樣用戶簡(jiǎn)介展示就實(shí)現(xiàn)了。容器組件中的AJAX請(qǐng)求將會(huì)由簡(jiǎn)單的AJAX庫(kù)發(fā)送出去，這里我推薦使用fetch()方法。

fetch()方法
http://andrewhfarmer.com/ajax...

適宜為網(wǎng)絡(luò)請(qǐng)求使用容器組件方法的場(chǎng)景：

1.項(xiàng)目組件樹(shù)比較深
2.項(xiàng)目中除了某些組件需要從服務(wù)器上獲取數(shù)據(jù)，絕大多數(shù)組件是不需要的。
3.項(xiàng)目需要從多端或多個(gè)API中獲取數(shù)據(jù)。
4.項(xiàng)目中沒(méi)有使用Redux或flux. 或者與’異步操作’方法相比，你更喜歡使用容器組件方法來(lái)完成請(qǐng)求數(shù)據(jù)功能。

Redux管理數(shù)據(jù)，而AJAX提供服務(wù)器上的數(shù)據(jù)，因此Redux 應(yīng)用于處理網(wǎng)絡(luò)請(qǐng)求。

如果使用Redux，就不要把AJAX放進(jìn)React組件里面，而是要放進(jìn)Async Actions里。

Async Actions
http://redux.js.org/docs/adva...

這里我還是推薦fetch()方法去處理實(shí)際網(wǎng)絡(luò)請(qǐng)求，幸運(yùn)地，Redux官方文檔上也是使用fetch().文檔中已有一個(gè)使用Redux、React和fetch()方法的實(shí)例

example reddit API.
http://redux.js.org/docs/adva...

如果你使用flux,那這個(gè)方法也是類(lèi)似的——在actions中發(fā)送網(wǎng)絡(luò)請(qǐng)求。

適宜使用Redux Async Actions的場(chǎng)景：

1.項(xiàng)目中正使用著Redux
2.項(xiàng)目中正使用著flux，使用方式也是類(lèi)似的

通過(guò)Relay，你需要使用GraphQL聲明React組件需要的數(shù)據(jù)，然后，Relay會(huì)自動(dòng)下載數(shù)據(jù)并傳遞至組件的props中。

Relay
http://facebook.github.io/relay/

Relay很適用于一個(gè)大型應(yīng)用中，但是對(duì)于使用者來(lái)說(shuō)，還是需要比較豐富的前期知識(shí)儲(chǔ)備的。你需要：

1.學(xué)習(xí)Relay和GraphQL.
2.使用GraphQL指定React組件的數(shù)據(jù)需求，而不是使用propTypes來(lái)指定
3.準(zhǔn)備一臺(tái)GraphQL服務(wù)器

Relay僅意味著要連接GraphQL服務(wù)器，因此它不會(huì)幫你連接任何第三方API.
目前，Relay僅能連接單一GraphQL服務(wù)器，因此，如果你要從多臺(tái)服務(wù)器中獲取數(shù)據(jù)，那Relay方法就不適用了。不過(guò)，將來(lái)有可能支持連接多臺(tái)服務(wù)器，這個(gè)問(wèn)題已經(jīng)在github上討論得熱火朝天了。

github上討論
https://github.com/facebook/r...

如果你要繼續(xù)研究Relay方法，那Realy Playground 是個(gè)搞清楚它如何工作的好地方。

Realy Playground
https://facebook.github.io/re...

適宜使用Relay方法的場(chǎng)景：

1.想要?jiǎng)?chuàng)建一個(gè)大型應(yīng)用而又比較關(guān)心Relay設(shè)計(jì)去解決的問(wèn)題(https://facebook.github.io/react/blog/2015/05/01/graphql-introduction.html#why-invent-something-new)
2.項(xiàng)目中還沒(méi)有建立JSON API
3.為項(xiàng)目準(zhǔn)備一臺(tái)GraphQL服務(wù)器
4.項(xiàng)目只會(huì)連接單一服務(wù)器

如果以上方法都是正確的，那么什么方法是錯(cuò)誤的呢？下面我來(lái)介紹兩種大家盡量要避免使用的方法。

已經(jīng)用作負(fù)責(zé)其他功能（如復(fù)雜界面渲染）的組件中就不要添加AJAX邏輯了，否則只會(huì)違反關(guān)注點(diǎn)分離的設(shè)計(jì)原則。

關(guān)注點(diǎn)分離
https://en.wikipedia.org/wiki...

你可以使用完全游離于React之外的AJAX邏輯，當(dāng)數(shù)據(jù)無(wú)論何時(shí)更新時(shí)，調(diào)用ReactDOM.render()來(lái)更新頁(yè)面。

ReactDOM.render()
https://facebook.github.io/re...

這個(gè)方法也許可以正常運(yùn)行。將它以反模式方式提出來(lái)，是因?yàn)槲覉?jiān)信第一種根組件方法雖與其類(lèi)似，但簡(jiǎn)潔多了。

使用React建立的應(yīng)用都是模塊化的,React會(huì)成為其中一個(gè)模塊，AJAX庫(kù)是另一個(gè)模塊。而使用Rails和Angular框架的應(yīng)用，Rails或Angular則不會(huì)成為應(yīng)用中的模塊。

原文：http://andrewhfarmer.com/reac...

iKcamp原創(chuàng)新書(shū)《移動(dòng)Web前端高效開(kāi)發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開(kāi)售。