背景
本项目是采用 `React+redux` 实现的知乎日报的App，所有API均来自网络（若涉及侵权，请及时联系我删除）
运行
- 获取 `git clone https://github.com/Hancoson/react-redux-demo.git`
- 安装 `npm install(yarn)`
- 启动 `npm start`
- 构建 `npm build`
对应技术
- 底层技术 `React+redux+react-router`
- 编码规范 `ES6`
- 构建工具 `webpack`
- UI `Antd`
- API 采用Yahoo跨域访问代理
- 其他工具技术 `React-hot-load`，`babel`，`webpack-dev-server`等
技术实现
react
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
state & props
- `props`（属性）和`state`（状态）的改变都会触发`render`函数来更新界面；
- 属性(`props`)是由父组件传递给子组件的；
- 状态(`state`)是组件内部维护的数据，当状态发生变化的同时，组件也会进行更新。 当状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出相应操作。
生命周期
//初始化阶段
getDefaultPropos //只调用一次，实力之间共享引用
getInitialState //初始化每个实例特有的状态
componentWillMount //render之前最后一次修改状态的机会
render //只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出
componentDidMount //成功render并渲染完成真实DOM后触发，可以修改DOM
//运行中阶段
componentWillReceiveProps //父组件修改属性触发，可以修改新属性，修改状态
shouldComponentUpdate //返回false会阻止render调用
componentWillUpeate //不能修改属性和状态
render //只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出
componentDidUpdate //可以修改DOM
//销毁阶段
componentWillUnMount //在删除组件之前进行清理操作，比如计时器和事件监听器。
组件化的开发思路
所谓组件，即封装起来的具有独立功能的UI部件
- React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件， 然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。
- 如果说MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。
redux
先简单说一下 `redux` 和` react` 是怎么配合的。`react-redux` 提供了`connect`和`Provider`两个好基友，它们一个将组件与`redux`关联起来，一个将`store`传给组件。组件通过`dispatch`发出`action`，`store`根据`action`的`type`属性调用对应的`reducer`并传入`state`和这个`action`，`reducer`对`state`进行处理并返回一个新的`state`放入`store`，`connect`监听到`store`发生变化，调用`setState`更新组件，此时组件的`props`也就跟着变化。
核心代码
app入口文件
store
reducer
总结
因为整个项目组我是第一个用react+redux做项目的，遇到问题只能自己解决，如果不是在github上下载了别人的代码，我觉得自己是不可能按时完成任务的，它让我少走了很多弯路。写一个已经被写烂的todo demo和写一个完整的项目完全是两回事，所以我非常欣赏和感谢那些愿意分享自己代码的人，也会将自己的代码分享出来，希望对大家有帮助。
最后附上github地址https://github.com/Hancoson/react-redux-demo ，喜欢的麻烦帮我点个star,我会分享更多干货。
原文地址：http://www.vsoui.com/2017/01/13/build-a-react-redux-app/
网友评论