React是一个让人使用后就想忘却jQuery的工具。得益于最近一个新项目的开发，可以实践一下ReactJs。这里暂且先只讨论开始搭建一个应用的框架，不去过多介绍React背景，也不去对比React与其他框架，因为这样的文章随便一找就有很多写的很好的文章，关于开发过程中踩到的坑会另开一篇总结。

框架选取与资源推荐

  • ReactJs: V15+
  • 状态管理: redux, react-redux
  • Redux中间件: redux-thunk(让action支持异步)
  • 路由管理: react-router, react-router-redux
  • html类名: classnames
  • HTTP客户端: axios
  • webpack: 静态资源管理
  • webpack-loader: babel, postcss, jsx
  • 其他库: react-bootstrap, antd, redux-form
  • Debug: React Developer Tools, Redux DevTools

Redux简单介绍

数据驱动是与之前基于jQuery的过程化开发最大的不同。而Redux是目前为止公认的对Flux思想(单向数据流管理)比较好的实现。对它理解的如何，可以说在一定程度上决定了开发的难易程度。
它是独立的，起源于React，但不止于支持React、Angular、Ember…,甚至是jQuery。但是显然更适用于状态驱动的框架。其基本架构如下图:

其核心可以理解为由3部分组成，aciton，reducer，store

  • action：用来描述需要进行一个怎样的行为。
    比如添加电影A和添加电影B，但这是两个不同的action。我们可以使用action creator叫做添加电影来创造之前的两个actioin。

  • reducer：每一个行为具体需要做什么才能改变state。
    可以理解为是数据库中的每一张表。最后通过Redux提供的combinReducers({})来组合所有的reducer并挂在到store树上。
    一个action可以对应多个不同的reducer，一个reducer也可以处理不同action。是多对多的关系。
    接收旧的state，并返回一个新的state。需要注意，不能返回之前state的引用。会用到Object.assign({}, state), […state]。

  • store: 是一个对象，维护一个全局的，唯一的state。并且提供dispatch, subscribe, getState的方法。

Redux与React的结合：redux-react
Redux通过Redux组件的Provider为整个react注入store。这个Provider组件也是继承了React.Component.

1
2
3
4
5
<Provider store={store}>
		<Router history={history}>
      {routes}
    </Router>
</Provider>

Connect方法为React组件提供stroe中的state和dispatch方法。简单来说，connect()可以把普通的react组件包装成Redux组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const mapStateToProps = (state) => {
  return {
    services: getVisibleServices(state.services),
    panelList: state.panelList
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(Object.assign({}, ServerActions, ServiceActions), dispatch)
  }
}
ServiceList.propTypes = {
  services: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ServiceList)

  • bindActionCreators: 对 store.dispatch(actionCreator(…args))的再次封装。直接写actions.xxx即可。

参考：React 数据流管理架构之 Redux 介绍

目录结构

因为react推崇的是组件化开发，因此代码组织上也是按照组件，将每个组件相关的资源放在一起管理起来更方便(之前自己还是按照传统多页开发的结构搭建，后来证明很不方便)
(这图截出来真是虚。。。)

React+Redux适用的场景

可以从上面的目录图中看出，整个目录结构还是挺复杂的。所以在使用这套搭配之前，我们需要提前评估我们的应用这样去构建是否是性价比合理的。一般来说，这样的搭配适用于这样的场景：

否则，就有些得不偿失，反而增加了开发成本。

使用之后

  • 在整个应用中，我们只需要关注数据状态的变化，使得我们开发时更加专注。什么样的界面对应什么样的状态，什么样的操作会引起什么样状态的变化，从而呈现什么样的界面。我们不再需要像jQuery那样去关注，都是哪些DOM的操作会影响本DOM的变化。

  • 整个html几乎全部由js生成（在不使用服务端渲染的前提下）。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
	<div id="app"></div>
	<script src="/build/index.js"></script>
</body>
</html>

  • 服务端渲染只适用于由NodeJs做开发语言的框架，像PHP, JAVA这类的是无法提供服务端渲染的。

  • 在后端不提供渲染模板的情况下，基本上只是把后端当做是异步接口的提供方。

  • 当redux+react更新state时，与这个state相关的组件都会被重新渲染。所以如果不需要，做shouldComponetUpdate()判断很重要。

  • 最后附上之前分享时的PPT