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適用于大型應用（比如非死book），使用Relay必須同時提供一個GraphQL server。

實現方案

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

不足

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

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

使用場景

• 超大型應用

• 不打算使用json API

</ul> </div>