探索react技术栈-技术选型

[ihtml5]

一.前言

---

陆陆续续接触react有一年多了，深感react的简单优雅，急切地想用react去开发程序。但是热情之后，发现react社区的种种问题。比如在社区打打常常提到的 angular vs react。react作为view层的库， 并没有给我们提供像angular那样全方位的解决方案。社区很多围绕react的解决方案层出不断，尚没有形成一致的最佳实践。那么，在现有的react解决方案下，我们能否提炼出一个行之有效的方案呢，笔者认为可以从以下几方面入手:

1. 技术选型
2. 项目目录划分
3. 应用程序状态管理
4. 前后台交互
5. 测试
6. 迭代式开发

本文作为探索react技术栈第一篇，首先来聊一聊基于react技术栈的技术选型。

二.技术选型

---

1. View(react)

   使用react来构造view

2. 状态管理(redux or mobx)

   redux和mobx是社区两个最著名的状态管理框架。可以选择其中一种，因为redux作者是react核心团队的开发者，基于redux的社区也非常庞大，推荐使用redux

3. 路由(react-router)

   react-router是react社区公认的路由框架，但是这个库更新频繁，api变动比较大，笔者推荐使用其较稳定的v2.8.1

4. 样式

   当前围绕react的样式解决方案，有三种即传统class声明，css in js,css modules

5. 语言(Es6)

   对浏览器要求不高，即满足ie9+以上的，可以使用es6开发应用，然后通过babel转码，对于浏览器要求较高的，使用es5来编写，并引入pollify来支持浏览器兼容

6. fetch

   fetch spec使用promise接口来进行后端接口请求，相比ajax来说，使用更加方便，在项目中，推荐使用fetch的官方实现

7. 构建工具(webpack)

   webpack是社区公认的优秀打包工具，和react非常搭。配合gulp来完成流畅地前端开发。

8. 测试(jest or enzyme)

   facebook推出的react测试工具jest和airbnb推出的enzyme都可以用来测试react

9. mock(node or json mock server)

   基于react的开发，几乎都是前后端分离，通过mock后端的接口，可以加快前端的开发效率。构建mock接口，一可以通过node来自己编写mock server或者可以通过现有的json mock server比如jsonyeah

10. 异步数据流处理

    对于简单的异步数据处理我们可以使用redux-thunk或者redux-promise,对于复杂的异步交互，可以使用redux-observable和redux-sagas

相关链接

---

1. react howto

2. React + Redux 最佳实践

[WangBiaoxuan]

good job