資訊專欄INFORMATION COLUMN
摘要：作者滬江前端開發(fā)工程師本文原創(chuàng)翻譯，有不當(dāng)?shù)牡胤綒g迎指出。管理數(shù)據(jù)，而提供服務(wù)器上的數(shù)據(jù)，因此應(yīng)用于處理網(wǎng)絡(luò)請求。結(jié)論使用建立的應(yīng)用都是模塊化的會成為其中一個模塊，庫是另一個模塊。原文原創(chuàng)新書移動前端高效開發(fā)實戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開售。
作者：Oral （滬江Web前端開發(fā)工程師）
本文原創(chuàng)翻譯，有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請指明出處。
當(dāng)你問起有關(guān)AJAX與React時，老司機(jī)們首先就會告訴你：React其實是個沒有網(wǎng)絡(luò)請求/AJAX功能的view庫。這種說法很容易理解，但對于當(dāng)你僅想讓你的React組件從服務(wù)器上獲取數(shù)據(jù)時，是沒啥幫助的。
事實上，有很多種方法可以滿足你的需求。也許你自己也腦洞大開考慮過幾個，但一旦走錯了方向，那代碼可就一團(tuán)糟了。
好吧，這下你好奇了：到底什么才是正確的、值得首選的方法呢？
答案是……看情況~~~
下面為大家一一介紹我收集的在React里使用AJAX的四個好方法。不過要注意的是，得根據(jù)app的大小及復(fù)雜度，和你已使用的庫和技術(shù)來決定該使用哪種方法。
1. 根組件（Root Component）方法這是一種最簡單的方法，因此它適用于簡單或小型的應(yīng)用。
通過這種方法，你可以建立單一根組件（父層組件）去分發(fā)所有AJAX請求，然后它會把AJAX響應(yīng)數(shù)據(jù)存儲進(jìn)state里，以props方式傳遞到子組件。可以參考下官方教程上的實例。
官方教程上的實例
https://facebook.github.io/re...
此實例中的CommentBox組件就是個分發(fā)所有AJAX請求的根組件。
不過，我不大喜歡官方教程實例中的一點：它使用了jQuery去發(fā)送AJAX請求。
jQuery是個有很多功能的大庫，因此僅因AJAX而引入它是沒多大意義的。
我推薦使用fetch()這個簡單、標(biāo)準(zhǔn)化的JavaScript 網(wǎng)絡(luò)請求API，它已被Chrome、Firefox瀏覽器支持,并且可以通過使用fetch polyfill去兼容其他瀏覽器。如果想要更具體地了解，大家可以參考我的《AJAX庫之對比》，也許這對你選擇自己的AJAX庫有點幫助。
AJAX庫之對比
http://andrewhfarmer.com/ajax...
注意：如果你的項目有著很深的組件樹結(jié)構(gòu)（子組件層層嵌套下去），那么就會需要把數(shù)據(jù)從根組件一層一層傳遞至子組件，而這個傳遞數(shù)據(jù)之路將比較長。
2. 容器組件方法（Container Components）適宜使用root component 方法的場景：
1、項目組件樹比較簡單 2、項目中沒有使用Redux或flux
容器組件就是“為展示組件或其它容器組件提供數(shù)據(jù)和方法的組件”，如果你還沒有聽過這個概念，建議你可以先閱讀下Dan Abramov的有關(guān)展示組件和容器組件的文章。
展示組件和容器組件
https://medium.com/@dan_abram...
容器組件方法與根組件方法很像，不同的是容器組件可以支持多組件與服務(wù)器端交互。（根組件方法僅支持通過單一組件與服務(wù)器端交互）
容器組件方法是這樣工作的：對于每個需要從服務(wù)器拿到數(shù)據(jù)的展示組件來說，需要有個可以發(fā)送網(wǎng)絡(luò)請求的容器組件來把請求到的數(shù)據(jù)通過props傳遞給子組件。
舉個具體的栗子：你想要展示一個有著name和picture的用戶簡介。我們該怎么去做呢？接下來，我們一步步來：
1.建立一個展示組件：
, 這個組件可以接收到name 和profileImage 數(shù)據(jù)。但是這個組件一定不能有任何AJAX請求代碼。 2.建立組件 ,這個組件用來接收urserId .它請求到用戶的數(shù)據(jù)以后通過props傳遞給剛才創(chuàng)建的組件 。
這樣用戶簡介展示就實現(xiàn)了。容器組件中的AJAX請求將會由簡單的AJAX庫發(fā)送出去，這里我推薦使用fetch()方法。
fetch()方法
http://andrewhfarmer.com/ajax...
適宜為網(wǎng)絡(luò)請求使用容器組件方法的場景：
1.項目組件樹比較深 2.項目中除了某些組件需要從服務(wù)器上獲取數(shù)據(jù)，絕大多數(shù)組件是不需要的。 3.項目需要從多端或多個API中獲取數(shù)據(jù)。 4.項目中沒有使用Redux或flux. 或者與’異步操作’方法相比，你更喜歡使用容器組件方法來完成請求數(shù)據(jù)功能。3.Redux Async Actions
Redux管理數(shù)據(jù)，而AJAX提供服務(wù)器上的數(shù)據(jù)，因此Redux 應(yīng)用于處理網(wǎng)絡(luò)請求。
如果使用Redux，就不要把AJAX放進(jìn)React組件里面，而是要放進(jìn)Async Actions里。
Async Actions
http://redux.js.org/docs/adva...
這里我還是推薦fetch()方法去處理實際網(wǎng)絡(luò)請求，幸運地，Redux官方文檔上也是使用fetch().文檔中已有一個使用Redux、React和fetch()方法的實例
example reddit API.
http://redux.js.org/docs/adva...
如果你使用flux,那這個方法也是類似的——在actions中發(fā)送網(wǎng)絡(luò)請求。
適宜使用Redux Async Actions的場景：
1.項目中正使用著Redux 2.項目中正使用著flux，使用方式也是類似的4. Relay
通過Relay，你需要使用GraphQL聲明React組件需要的數(shù)據(jù)，然后，Relay會自動下載數(shù)據(jù)并傳遞至組件的props中。
Relay
http://facebook.github.io/relay/
Relay很適用于一個大型應(yīng)用中，但是對于使用者來說，還是需要比較豐富的前期知識儲備的。你需要：
1.學(xué)習(xí)Relay和GraphQL. 2.使用GraphQL指定React組件的數(shù)據(jù)需求，而不是使用propTypes來指定 3.準(zhǔn)備一臺GraphQL服務(wù)器
Relay僅意味著要連接GraphQL服務(wù)器，因此它不會幫你連接任何第三方API.
目前，Relay僅能連接單一GraphQL服務(wù)器，因此，如果你要從多臺服務(wù)器中獲取數(shù)據(jù)，那Relay方法就不適用了。不過，將來有可能支持連接多臺服務(wù)器，這個問題已經(jīng)在github上討論得熱火朝天了。
github上討論
https://github.com/facebook/r...
如果你要繼續(xù)研究Relay方法，那Realy Playground 是個搞清楚它如何工作的好地方。
Realy Playground
https://facebook.github.io/re...
適宜使用Relay方法的場景：
1.想要創(chuàng)建一個大型應(yīng)用而又比較關(guān)心Relay設(shè)計去解決的問題(https://facebook.github.io/react/blog/2015/05/01/graphql-introduction.html#why-invent-something-new) 2.項目中還沒有建立JSON API 3.為項目準(zhǔn)備一臺GraphQL服務(wù)器 4.項目只會連接單一服務(wù)器彩蛋：反模式
如果以上方法都是正確的，那么什么方法是錯誤的呢？下面我來介紹兩種大家盡量要避免使用的方法。
反模式 1：在展示組件中使用AJAX請求已經(jīng)用作負(fù)責(zé)其他功能（如復(fù)雜界面渲染）的組件中就不要添加AJAX邏輯了，否則只會違反關(guān)注點分離的設(shè)計原則。
反模式2：ReactDOM.render()關(guān)注點分離
https://en.wikipedia.org/wiki...
你可以使用完全游離于React之外的AJAX邏輯，當(dāng)數(shù)據(jù)無論何時更新時，調(diào)用ReactDOM.render()來更新頁面。
ReactDOM.render()
https://facebook.github.io/re...
這個方法也許可以正常運行。將它以反模式方式提出來，是因為我堅信第一種根組件方法雖與其類似，但簡潔多了。
結(jié)論：使用React建立的應(yīng)用都是模塊化的,React會成為其中一個模塊，AJAX庫是另一個模塊。而使用Rails和Angular框架的應(yīng)用，Rails或Angular則不會成為應(yīng)用中的模塊。
原文：http://andrewhfarmer.com/reac...
iKcamp原創(chuàng)新書《移動Web前端高效開發(fā)實戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/85166.html
摘要：如果你的運行緩慢，你可以考慮是否能優(yōu)化請求，減少對的操作，盡量少的操，或者犧牲其它的來換取性能。在認(rèn)識描述這些核心元素的過程中，我們也會分享一些當(dāng)我們構(gòu)建的時候遵守的一些經(jīng)驗規(guī)則，一個應(yīng)用應(yīng)該保持健壯和高性能來維持競爭力。 一個開源的前端錯誤收集工具 frontend-tracker，你值得收藏~ 蒲公英團(tuán)隊最近開發(fā)了一款前端錯誤收集工具，名叫 frontend-tracker ，這款...
摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時，老司機(jī)們首先就會告訴你其實是個沒有網(wǎng)絡(luò)請求功能的庫。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡單 原文地址：Learning React.js is easier than you think 原文作...
摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區(qū)有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關(guān)資源列表。我認(rèn)為，使用函數(shù)式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習(xí)慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風(fēng)》...
摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區(qū)有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關(guān)資源列表。我認(rèn)為，使用函數(shù)式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習(xí)慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風(fēng)》...
摘要：一般來說，聲明式編程關(guān)注于發(fā)生了啥，而命令式則同時關(guān)注與咋發(fā)生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區(qū)處理，這樣就能讓開發(fā)者專注于發(fā)生了啥，這里推薦一波與。 本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。 繼續(xù)譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...
閱讀 1578·2021-11-25 09:43
閱讀 2482·2019-08-30 15:54
閱讀 2946·2019-08-30 15:53
閱讀 1094·2019-08-30 15:53
閱讀 754·2019-08-30 15:52
閱讀 2545·2019-08-26 13:36
閱讀 813·2019-08-26 12:16
閱讀 1216·2019-08-26 12:13
