react如何和server交互

1treeS 发布于2019-08-19 17:36 / 1895人阅读

摘要：在一个应用中，如何通过和端进行交互这个问题曾经困扰了我一段时间，经过学习实践，有了一点心得体会，写出来和大家分享一下。组件和一样，和进行交互，将获取的通过向下传递给组件。不足被设计用来和服务器一起运行，并不能很好的和第三方服务交互。

在一个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交互

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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