react如何和server交互

在一個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