云端卫士实战录 React + Redux 前端项目实践

《实战录》导语

　　本期分享人为云端卫士运营平台工程师张雨，将带来React + Redux 前端项目实践分享。

　　一、为什么选择React

　　首先，React是用来解决一个大型应用的数据变更问题。如果你的应用足够简单，比如数据不变更，那么用React的确没有必要，因为你还要浪费时间去生成虚拟DOM，而且不需要考虑状态的变化。

　　其次，React能自动处理数据变更后的UI。这样的话，代码就很少会直接处理DOM，那代码绝大多数都会处理数据的变更。这样会很大程度上简化代码。

　　二、实际项目中的运用

　　实际项目开发中，需要对 ES6 和 JSX 代码的构建、调试、代理、打包部署等进行一系列工程化的需求，我们选择webpack作为构建工具，编译解析ES6和JSX我们采用babel。Webpack和React结合的强大之一就是，在修改了组件源码之后，不刷新页面就能把修改同步到页面上。这里需要用到两个库webpack-dev-server和react-hot-loader。

　　因为React的每一次更新都是全局刷新的虚拟DOM机制，所以React组件的热替换可以成为通用的加载器，从而极大提高开发效率。

　　下面介绍一些我们在实际项目中运用到的库。

　　1、react-redux

　　由于React只是MVC中的View层，我们需要搭配中间件使用。这里我们选择了Redux。React本身和Redux之间并没有之间的关联，我们借助react-redux这个库来做连接。react-redux提供了两个关键模块，provider和connect。connect真正意义上的连接了React和Redux。Redux的核心概念就是action、store和reducer，调用关系如下所示。

　　store.dispatch(action) --> reducer(state, action) --> final state

　　store：代表的是数据模型，内部维护了一个state变量，用例描述应用的状态。store有两个核心方法，分别是getState、dispatch。前者用来获取store的状态（state），后者用来修改store的状态。

　　action：对行为（如用户行为）的抽象，在redux里是一个普通的js对象。redux对action的约定比较弱，除了一点，action必须有一个type字段来标识这个行为的类型。

　　reducer：一个普通的函数，用来修改store的状态。传入两个参数 state、action。其中，state为当前的状态（可通过store.getState()获得），而action为当前触发的行为（通过store.dispatch(action)调用触发）。reducer(state, action) 返回的值，就是store最新的state值。映射到我们的React应用中，store中维护的state就是我们的app state，一个React组件作为View层，做两件事：render和响应用户操作。于是connect就是将store中的必要数据作为props传递给React组件来render，并包装action creator用于在响应用户操作时dispatch一个action。

　　connect的API：

　　mapStateToProps：一个函数，返回值表示的是需要merge进props的state, mapDispatchToProps：可以是一个函数，返回值表示的是需要merge仅props的actionCreators，这里的actionCreator应该是已经被包装了dispatch了的，这里我们使用redux的bindActionCreators函数。bindActionCreators把action creators转成拥有同名keys的对象，但使用dispatch把每个action creator包围起来，这样可以直接调用它们。

　　2、redux-actions

　　我们引用了一个redux-actions库，用来生成基本action type函数模板代码。它的handleAction可以简化reducers的写法，不用写那么多switch语句。

　　3、react-router

　　react-router是官方维护的唯一可选的路由库，它通过管理URL，实现组件的切换和状态的变化。使用时，路由器Router就是React的一个组件。Router组件本身只是一个容器，真正的路由要通过Route组件定义。Route组件定义了URL和组件的对应关系，可以同时使用多个组件。

　　import { Router, Route, hashHistory } from 'react-router';render(( <Router history={hashHistory}> <Route path="/" component={Home}/> <Route path="*" component={NotFound}/> <Route path="/login" component={Login}/> </Router>), document.getElementById('app'));

　　4、redux-saga

　　我们使用redux-saga处理异步请求。redux-saga只在程序运行时被调用一次，在后台执行时监听store中被dispatch的action，继而决定对该action做什么样的处理。redux-saga提供了多种Effects用于处理各种任务，包括回调异步函数，启动一个后台任务，dispatch一个action等。

　　import { takeLatest, takeEvery } from 'redux-saga';import { take, call } from 'redux-saga/effects'; import Api from '…';

　　function* watchUser(action) { try { const store = yield call(Api.watchUser, action.payload); yield put({type: "GET_USER_SUCCESS", user: store}); } catch (e) { yield put({type: "GET_USER_ERROR", message: e.message}); } });}function* mySaga(){ yield takeLatest("GET_USER_SUCCESS", watchUser)}export default mySaga;

　　5、Fetch

　　请求后台接口，我们选择了Fetch。Fetch的主要优点有：①语法简单，更加语义化②基于标准Promise实现，支持async/await③同构方便，使用isomorphic-fetch。

　　6、immutable

　　Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

　　三、后记

　　React天生的组件化使我们能够沉淀可重用、可维护、高性能的UI组件， 它的代码基本就是组件的组合，分而治之的方式让代码的可阅读性很高，容易理解。而基于Redux的架构，确定性的store很容易定位问题， 无论是新增业务还是修改bug都不再困难。并且React实现了Virtual DOM，效率和性能明显提高。