React Ajax最佳实践[译]

当你开始询问关于React和AJAX的一些东西时,专家们首先就会告诉你React只是一个View层的库,它并没有网络及AJAX的相关功能。 这是对React很好的认识,但是对于你仅仅是想在React组件中获取服务端数据并没有什么帮助。 事实上,有很多方式可以这么做。也许你自己已经想过一些方法了,但是如果使用的方式不正确,那么代码会变的混乱。 于是你会好奇,什么才是“正确”或者说是“较好”的方式呢? 在React组件中从服务端获取数据的最佳实践是什么呢 结论是...看使用场景。 四种方式 我收集了和React使用AJAX的四种方式。 具体使用哪种方式取决于你的开发规模及复杂度,并且还需要考虑你当前已经使用的类库和技术方案。 1. 根组件 这是最简单的实现方式,因此这种方式很适合做原型和小型的项目。 使用这种方式,你需要创建一个根/父组件来分发你所有的AJAX请求。这个根组件将AJAX返回的数据存它的state中,然后将这个state(或是里面的一部分)作为props传到子组件中。 这种方式的例子可以看下官方的React教程。CommentBox 组件就是发送所有AJAX请求的根组件。 我不太喜欢官方教程的地方是:他们还使用jQuery来发送AJAX请求。jQuery包含了很多功能的大类库,因此不太理解为什么他们只是为了发送AJAX请求还使用jQuery。 我推荐使用fetch()。它是更加简单标准的Javascript AJAX API。Chrome和Firefox已经支持这个API并且使用polyfills也可以支持node和其他浏览器。想了解更多细节或者想更好的选择你的AJAX库,可以看看我的AJAX库对比这篇文章。 警告:如果你的场景中是一个深层次的组件树(…

Read More