react如何和server交互

1treeS 發布于2019-08-19 17:36 / 1922人閱讀

摘要：在一個應用中，如何通過和端進行交互這個問題曾經困擾了我一段時間，經過學習實踐，有了一點心得體會，寫出來和大家分享一下。組件和一樣，和進行交互，將獲取的通過向下傳遞給組件。不足被設計用來和服務器一起運行，并不能很好的和第三方服務交互。

在一個react應用中，如何通過ajax和server端進行交互這個問題曾經困擾了我一段時間，經過學習實踐，有了一點心得體會，寫出來和大家分享一下。

總的來說，我知道的react ajax交互方式大致有以下4種：

Root Component

Container Component

Redux/Flux Async Actions

Relay

Root Component

這個是最直接的方式，非常適合原型和小型應用開發。

實現方案

實現起來也很簡單，在整個應用的最頂層，有一個root component。所有的ajax請求都在這個組件的componentDidMount中發起，并將返回的結果作為自己的state保存，同時，通過props向下層組件傳遞數據。

不足

如果應用比較大，組件嵌套比較深的話，data得通過props一路傳下去……(當然，也可以通過context的方式，不過context用來傳data并不合適)

使用場景

應用比較簡單，組件樹不深

沒有用Redux或者Flux

Container Component

這個方案和root component很像，區別在于可以同時有多個container和server交互。

實現方案

首先要把component區分為container和presentational兩類。

container組件和root component一樣，和server進行ajax交互，將獲取的data通過props向下傳遞給presentational組件。

使用場景

組件樹比較深

需要從不同的server或者api獲取數據

沒有用Redux或者Flux

Redux/Flux Async Actions

如果已經在使用Redux/Flux，通過他們來管理數據是很自然的事情。

實現方案

實現上，Redux官方文檔有個很好的示例。

簡單來說，就是完全不在組件中發起ajax請求，將這些操作放在async actions中進行。

使用場景

使用和Redux或者Flux

Relay

Relay就完全是另外一個世界了，和前面三種有本質區別。

Relay適用于大型應用（比如facebook），使用Relay必須同時提供一個GraphQL server。

實現方案

首先，得有一個GraphQL server，然后，還得用GraphQL（而不是propTypes）定義組件需要的數據。剩下的交給Relay就好了，他會負責自動下載需要的數據并填充到組件的props里面。

不足

Relay被設計用來和GraphQL服務器一起運行，并不能很好的和第三方json服務交互。

目前，Relay好像只能和一個GraphQL服務器連接。

使用場景

超大型應用

不打算使用json API

GPU云服務器云服務器 react如何部署到云服務器上 php和前端交互 python和c交互 ios和html交互

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78663.html

React項目實踐系列一

摘要：在此我們選用用友的公共靜態資源庫。因此打算建立遠程的其實還有個關鍵是我使用用友配的電腦開發，在本地部署的話電腦配置。。。不過此步驟我們也可以省略了，用友的大前端技術團隊提供了平臺。數據分析平臺-實踐系列一項目創建于2018年1月底，到現在已經接近半年，在此寫下半年來項目的實踐過程以及自己對前端的學習與體悟。技術選型框架： React 路由： React-Router 4 狀態管...

DC_er 2019-08-26 12:01 評論0 收藏0
從零開始，揭秘React服務端渲染核心技術

摘要：不過這時的控制臺會拋出這樣一則警告提醒我們在服務端渲染時用來取代，并警告我們在時將不能用去混合服務端渲染出來的標簽。綜上所述，服務端和客戶端都是需要路由體現的。我們畫一下重點，意思很明確，就是為了服務端渲染而打造的。拋磚引玉在早幾年前，jquery算是一個前端工程師必備的技能。當時很多公司采用的是java結合像velocity或者freemarker這種模板引擎的開發模式，頁面渲染...

googollee 2019-08-26 10:27 評論0 收藏0
react-redux-express異步前后端數據交互(面向初學者,高手勿進)

摘要：花了整整三天的時間來解決一個非常非常小的問題想要把一點心得體會記錄下來首先是問題的提出前端如果是后端是如何進行數據的交互總體思路以前接觸的時候前端模板用的是那時候就有些不理解的地方最為不理解的幾個問題是前端和后端怎么配合特別是前端特別復雜的花了整整三天的時間來解決一個非常非常小的問題.想要把一點心得體會記錄下來.首先是問題的提出:前端如果是react,后端是express,如何進行數...

KaltZK 2019-08-19 18:44 評論0 收藏0
JavaScript 就要統治世界了？

摘要：歡迎使用中文文檔架構概覽是網易項目團隊開發的一個基于進行開發的應用層框架，提供了一個輕量級的容器來編寫簡單可維護的。 JavaScript 可以……嘛，不就是操作一下 DOM，可以讓元素飛來飛去嗎JavaScript 是……不就是用 jQuery 讓網頁動起來，頂多就是再用用 Ajax 和后端進行一下數據交換嗎JavaScript 是一門……最討厭和鄙視這種弱類型不需要編譯的腳本語言...

AbnerMing 2019-08-21 10:41 評論0 收藏0
專治前端焦慮的學習方案

摘要：不過今天我希望能夠更進一步，不僅僅再抱怨現狀，而是從我個人的角度來給出一個逐步深入學習生態圈的方案。最后，我還是想提到下對于的好的學習方法就是回顧參照各種各樣的代碼庫，學習人家的用法與實踐。本文翻譯自A-Study-Plan-To-Cure-JavaScript-Fatigue。筆者看到里面的幾張配圖著實漂亮，順手翻譯了一波。本文從屬于筆者的Web Frontend Introduc...

codeGoogle 2019-08-21 14:41 評論0 收藏0