09月09, 2016

React系列之-开始使用React+Redux

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.

<Provider store={store}>
        <Router history={history}>
      {routes}
    </Router>
</Provider>

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

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生成(在不使用服务端渲染的前提下)。

<!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

本文链接:https://imjiaolong.cn/post/react.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。