MWCF

2015/12/20

新浪金融-微财富

前期的思考

  • 模块化方案我们用什么？
  • 构建工具哪一种好？
  • 语言用什么版本ES6/7还是ES5？
  • 要不要用全桟式框架？
  • 代码规范怎么规范？
  • 前端的生态圈太庞大、该如何抉择？

技术选型

问题点

  • 新的技术兼容性处理如何？
  • 学习成本和项目的时间把控怎么办？
  • 放弃以前的技术沉淀是否有价值？

抉择

  • 视图层渲染react
  • 数据状态控制redux
  • 构建工具webpack
  • 路由控制react-router
  • 代码规范让eslint来约束
  • 异步网络isomorphic-fetch(ajax的替代方案)
  • 自行整合较好的零散方案组合框架

NOTE（也就是需要了解的扩展知识点）

可能用到的类库:immutable、fetch、promise、classnames、lodash

搭建环境

react-redux-starter-kit

//这个直接checkout现有项目http://svn.weihui.com/svn/src/pmd/FE/MWCF
git clone https://github.com/davezuko/react-redux-starter-kit.git
cd react-redux-starter-kit
npm install
npm start

目录结构

工作的目录主要是src下、最外层多为配置目录和配置文件详细的说明参见README.md，README中没有直接看官方文档吧！

一个页面在项目中的执行周期

  1. 入口main.js准备路由和store、同时创建root并将route和store通过props传到下层并分别分配到react-redux的Provider和react-router的Router并初始化项目
  2. 初始化完成之后项目的路由(地址栏)完全由react-router接手那么路由配置中指定的component即是对应路由加载的组件访问对应path即可看到对应的component

以上为两个主流程中的细节流程

  • main.js中的configureStore将所有的store都combineReducers到了rootReducer并创建了store也就意味着你刚进首页其实你的整个store都已经初始化完毕
  • 在路由对应的react组件中它import了redux中的所有action并通过react-redux的connect方法给到了组件的props上以备在组件中直接调用
  • 而刚刚提到的类库immutable就是在reducer来确保原state的不变性的在reducer中切记不可改变顶层的state故要养成将reducer保持到单一职责专注于一件事儿、最后通过combineReducers到一个reducer中那样逻辑更加清晰
  • 刚刚的fetch的异步场景主要依赖的是一个middleware来处理的、可以简单的理解为在action到reducer的中间我们会插入一个middleware来处理掉所有的异步的场景
  • classnames是当初纠结于css in js模式还是css单独按模块拆开放而加上的一个类库，应用非常简单
import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'

// React component
class Counter extends React.Component {
  render () {
    const { value, onIncreaseClick } = this.props
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    )
  }
}

Counter.propTypes = {
  value: PropTypes.number.isRequired,
  onIncreaseClick: PropTypes.func.isRequired
}

// Action
const increaseAction = {type: 'increase'}

// Reducer
function counter (state = {count: 0}, action) {
  let count = state.count
  switch (action.type) {
    case 'increase':
      return {count: count + 1}
    default:
      return state
  }
}

// Store
let store = createStore(counter)

// Map Redux state to component props
function mapStateToProps (state) {
  return {
    value: state.count
  }
}

// Map Redux actions to component props
function mapDispatchToProps (dispatch) {
  return {
    onIncreaseClick: () => dispatch(increaseAction)
  }
}

// Connected Component
let App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

再上一道素菜-理解redux的一段简单代码

文档整理

guide-mark

##Webpack

[webpack-howto](http://qiutc.me/post/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8webpack%E2%80%94webpack-howto.html)

[webpack优化](http://www.alloyteam.com/2016/01/webpack-use-optimization/#prettyPhoto)

[webpack-react](https://fakefish.github.io/react-webpack-cookbook/)

[webpack入门指迷](http://segmentfault.com/a/1190000002551952)


##Redux

[深入浅出redux](http://www.w3ctech.com/topic/1561)

[数据流管理架构之 Redux 介绍](http://www.alloyteam.com/2015/09/react-redux/)

[深入到源码：解读 redux 的设计思路与用法](http://div.io/topic/1309?page=1#6170)

[Redux中间件深入浅出](http://blog.kazaff.me/2015/10/09/%5B%E8%AF%91%5DRedux%E4%B8%AD%E9%97%B4%E4%BB%B6%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BA/index.html)

[redux源码分析](http://div.io/topic/1530)

[awesome-redux](https://github.com/xgrommx/awesome-redux)

##React


##ES6/7
[ECMAScript 6 入门](http://es6.ruanyifeng.com/#README)

#example
 *[房金所](https://fangjs.sina.com.cn/mobile/)
 *[卖座电影](http://m.maizuo.com/v4/)
 *[amazeUi](http://t.amazeui.org/#/docs/tabbar?_k=7ofyqk)
 *[ant-design](http://ant.design/docs/react/introduce)


#官方doc
[react](http://reactjs.cn/react/docs/getting-started.html)

[redux](https://camsong.github.io/redux-in-chinese/index.html)

[react-router](http://react-guide.github.io/react-router-cn/index.html)

[immutable](http://facebook.github.io/immutable-js/docs/#/)

#基于sublime的环境配置
[在SublimeText上搭建ReactJS开发环境](https://segmentfault.com/a/1190000003954626)
[eslint](http://smocean.github.io/)

* jsxhint

#网络请求
[promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)

[isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)

有markdown的软件建议在markdown中打开或者直接访问guide-mark，如果有更好的文档欢迎pr到guide-mark

阅读官方文档

阅读官方文档

阅读官方文档

概念太多怎么办

Q&A

微财富H5版前端重构启程

By Honglei Zhu

Made with Slides.com

微财富H5版前端重构启程

  • 1,672

More from Honglei Zhu