資訊專欄INFORMATION COLUMN
摘要：在一個(gè)應(yīng)用中，如何通過和端進(jìn)行交互這個(gè)問題曾經(jīng)困擾了我一段時(shí)間，經(jīng)過學(xué)習(xí)實(shí)踐，有了一點(diǎn)心得體會(huì)，寫出來和大家分享一下。組件和一樣，和進(jìn)行交互，將獲取的通過向下傳遞給組件。不足被設(shè)計(jì)用來和服務(wù)器一起運(yùn)行，并不能很好的和第三方服務(wù)交互。
在一個(gè)react應(yīng)用中，如何通過ajax和server端進(jìn)行交互這個(gè)問題曾經(jīng)困擾了我一段時(shí)間，經(jīng)過學(xué)習(xí)實(shí)踐，有了一點(diǎn)心得體會(huì)，寫出來和大家分享一下。
總的來說，我知道的react ajax交互方式大致有以下4種：
Root Component
Container Component
Redux/Flux Async Actions
Relay
Root Component這個(gè)是最直接的方式，非常適合原型和小型應(yīng)用開發(fā)。
實(shí)現(xiàn)方案實(shí)現(xiàn)起來也很簡單，在整個(gè)應(yīng)用的最頂層，有一個(gè)root component。所有的ajax請求都在這個(gè)組件的componentDidMount中發(fā)起，并將返回的結(jié)果作為自己的state保存，同時(shí)，通過props向下層組件傳遞數(shù)據(jù)。
不足如果應(yīng)用比較大，組件嵌套比較深的話，data得通過props一路傳下去……(當(dāng)然，也可以通過context的方式，不過context用來傳data并不合適)
使用場景應(yīng)用比較簡單，組件樹不深
沒有用Redux或者Flux
Container Component這個(gè)方案和root component很像，區(qū)別在于可以同時(shí)有多個(gè)container和server交互。
實(shí)現(xiàn)方案首先要把component區(qū)分為container和presentational兩類。
container組件和root component一樣，和server進(jìn)行ajax交互，將獲取的data通過props向下傳遞給presentational組件。
使用場景組件樹比較深
需要從不同的server或者api獲取數(shù)據(jù)
沒有用Redux或者Flux
Redux/Flux Async Actions如果已經(jīng)在使用Redux/Flux，通過他們來管理數(shù)據(jù)是很自然的事情。
實(shí)現(xiàn)方案實(shí)現(xiàn)上，Redux官方文檔有個(gè)很好的示例。
簡單來說，就是完全不在組件中發(fā)起ajax請求，將這些操作放在async actions中進(jìn)行。
使用場景使用和Redux或者Flux
RelayRelay就完全是另外一個(gè)世界了，和前面三種有本質(zhì)區(qū)別。
Relay適用于大型應(yīng)用（比如facebook），使用Relay必須同時(shí)提供一個(gè)GraphQL server。
實(shí)現(xiàn)方案首先，得有一個(gè)GraphQL server，然后，還得用GraphQL（而不是propTypes）定義組件需要的數(shù)據(jù)。剩下的交給Relay就好了，他會(huì)負(fù)責(zé)自動(dòng)下載需要的數(shù)據(jù)并填充到組件的props里面。
不足Relay被設(shè)計(jì)用來和GraphQL服務(wù)器一起運(yùn)行，并不能很好的和第三方j(luò)son服務(wù)交互。
目前，Relay好像只能和一個(gè)GraphQL服務(wù)器連接。
使用場景超大型應(yīng)用
不打算使用json API
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/78663.html
摘要：在此我們選用用友的公共靜態(tài)資源庫。因此打算建立遠(yuǎn)程的其實(shí)還有個(gè)關(guān)鍵是我使用用友配的電腦開發(fā)，在本地部署的話電腦配置。。。不過此步驟我們也可以省略了，用友的大前端技術(shù)團(tuán)隊(duì)提供了平臺(tái)。 數(shù)據(jù)分析平臺(tái)-實(shí)踐系列一 項(xiàng)目創(chuàng)建于2018年1月底，到現(xiàn)在已經(jīng)接近半年，在此寫下半年來項(xiàng)目的實(shí)踐過程以及自己對(duì)前端的學(xué)習(xí)與體悟。 技術(shù)選型 框架： React 路由： React-Router 4 狀態(tài)管...
摘要：不過這時(shí)的控制臺(tái)會(huì)拋出這樣一則警告提醒我們在服務(wù)端渲染時(shí)用來取代，并警告我們在時(shí)將不能用去混合服務(wù)端渲染出來的標(biāo)簽。綜上所述，服務(wù)端和客戶端都是需要路由體現(xiàn)的。我們畫一下重點(diǎn)，意思很明確，就是為了服務(wù)端渲染而打造的。 拋磚引玉 在早幾年前，jquery算是一個(gè)前端工程師必備的技能。當(dāng)時(shí)很多公司采用的是java結(jié)合像velocity或者freemarker這種模板引擎的開發(fā)模式，頁面渲染...
摘要：歡迎使用中文文檔架構(gòu)概覽是網(wǎng)易項(xiàng)目團(tuán)隊(duì)開發(fā)的一個(gè)基于進(jìn)行開發(fā)的應(yīng)用層框架，提供了一個(gè)輕量級(jí)的容器來編寫簡單可維護(hù)的。 JavaScript 可以……嘛，不就是操作一下 DOM，可以讓元素飛來飛去嗎JavaScript 是……不就是用 jQuery 讓網(wǎng)頁動(dòng)起來，頂多就是再用用 Ajax 和后端進(jìn)行一下數(shù)據(jù)交換嗎JavaScript 是一門……最討厭和鄙視這種弱類型不需要編譯的腳本語言...
摘要：花了整整三天的時(shí)間來解決一個(gè)非常非常小的問題想要把一點(diǎn)心得體會(huì)記錄下來首先是問題的提出前端如果是后端是如何進(jìn)行數(shù)據(jù)的交互總體思路以前接觸的時(shí)候前端模板用的是那時(shí)候就有些不理解的地方最為不理解的幾個(gè)問題是前端和后端怎么配合特別是前端特別復(fù)雜的 花了整整三天的時(shí)間來解決一個(gè)非常非常小的問題.想要把一點(diǎn)心得體會(huì)記錄下來.首先是問題的提出:前端如果是react,后端是express,如何進(jìn)行數(shù)...
摘要：不過今天我希望能夠更進(jìn)一步，不僅僅再抱怨現(xiàn)狀，而是從我個(gè)人的角度來給出一個(gè)逐步深入學(xué)習(xí)生態(tài)圈的方案。最后，我還是想提到下對(duì)于的好的學(xué)習(xí)方法就是回顧參照各種各樣的代碼庫，學(xué)習(xí)人家的用法與實(shí)踐。 本文翻譯自A-Study-Plan-To-Cure-JavaScript-Fatigue。筆者看到里面的幾張配圖著實(shí)漂亮，順手翻譯了一波。本文從屬于筆者的Web Frontend Introduc...
閱讀 3731·2021-11-24 09:39
閱讀 1365·2021-09-30 09:48
閱讀 3367·2021-09-09 11:51
閱讀 2977·2021-09-08 10:41
閱讀 1394·2019-08-30 14:06
閱讀 2871·2019-08-30 14:01
閱讀 931·2019-08-29 17:11
閱讀 3235·2019-08-29 15:37
