公司的项目使用的是react+redux+antd的技术，作为新手我在不断学习，整理一下react+redux的内容，作为项目入门的记录。
网上有很多有趣清晰的说明文章，参考了几篇列一下：
https://zhuanlan.zhihu.com/p/20641377?columnSlug=haochuan
https://github.com/jasonslyvia/a-cartoon-intro-to-redux-cn
http://www.ruanyifeng.com/blog/2015/03/react.html（阮大神的文章需要好好学习下的）
http://www.runoob.com/react/react-state.html
下面是关于react和redux的学习内容摘要
react：
特点：
1.组件化——JSX语法；
2.单向数据流------数据一旦更新，就将重新渲染整个APP---redux；
3.虚拟DOM树———更新时重建DOM树，找到与上一个版本的DOM差异，计算最新DOM更新操作，批量进行更新----可以直接渲染特定的页面而不是整个APP；
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。这个渲染过程为：交互—>状态改变—>实现不同状态—>渲染UI。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
举个例子。最近做的一个小需求，通过订单的状态更改订单的类型列表，出了bug，后来在前辈指导下修正了。贴一部分代码说明一下：
handleOrderTypeChange= (value) => {
this.setState({orderType: value});
this.props.form.setFieldsValue({order_status: orderTypeToStatus[value] ？orderTypeToStatus[value][0] : orderStatus[0].name});
}
//在view中进行更新
render{ ……
{getFieldDecorator('order_type',{initialValue:"",onChange:this.handleOrderTypeChange}) (
{this.orderOptions()}
)}
}
这部分通过在函数 handleOrderTypeChange 中，使用this.setState 方法修改状态值，然后使用antd的方法 setFieldsValue，将ordertype的内容推进文本框即可。这个例子体现了react的组件化的特点。
redux：
从上述对react的特点介绍，可以看出，
1. react的数据是单向流动的，没有数据向上回溯的能力，也就是说数据只能单向向下分发，或者自行内部消化。
2. react根本无法让两个组件相互交流，互相使用数据，然后这时候不通过DOM沟通（也就是React体制内）解决的唯一办法就是提升state，将state放到共有的父组件中来管理，再作为props分发回子组件。
3. 子组件改变父组件state的办法只能是通过onClick触发父组件声明好的回调，也就是父组件提前声明好函数或方法作为契约描述自己的state将如何变化，再将它同样作为属性交给子组件使用。
4. 为了面临所有可能的扩展问题，最容易想到的办法就是把所有state集中放到所有组件顶层，然后分发给所有组件。
为了有更好的state管理，就需要一个库来作为更专业的顶层state分发给所有React应用，这就是Redux。
让我们回来看看重现上面结构的需求：
a. 需要回调通知state (等同于回调参数) -> action
b. 需要根据回调处理 (等同于父级方法) -> reducer
c. 需要state (等同于总状态) -> store
因此，redux的三要素就是 action，reducer，store：
action：纯声明式的数据结构，只提供事件的所有要素，不提供逻辑。
reducer：一个匹配函数，action的发送是全局的：所有的reducer都可以捕捉到并匹配（比如使用switch...case结构）与自己相关与否，相关就拿走action中的要素进行逻辑处理，修改store中的状态，不相关就不对state做处理原样返回。
store：负责存储状态并可以被react api回调，发布action.
具体工作的时候，流程为：
通过view（state）触发action，通过reducer匹配action，通过在reducer中改变state，最终反应到view中；
流程图为：
view ---> action ---> reducer ---> store(state) ---> view
当然一般不会直接把两个库拿来用，还有一个binding叫react-redux, 提供一个Provider和connect。
Provider是一个普通组件，可以作为顶层app的分发点，它只需要store属性就可以了。它会将state分发给所有被connect的组件，不管它在哪里，被嵌套多少层。
connect是真正的重点，它是一个柯里化函数，意思是先接受两个参数（数据绑定mapStateToProps和事件绑定mapDispatchToProps），再接受一个参数（将要绑定的组件本身）：
mapStateToProps：构建好Redux系统的时候，它会被自动初始化，但是你的React组件并不知道它的存在，因此你需要分拣出你需要的Redux状态，所以你需要绑定一个函数，它的参数是state，简单返回你关心的几个值。
mapDispatchToProps：声明好的action作为回调，也可以被注入到组件里，就是通过这个函数，它的参数是dispatch，通过redux的辅助方法bindActionCreator绑定所有action以及参数的dispatch，就可以作为属性在组件里面作为函数简单使用了，不需要手动dispatch。这个mapDispatchToProps是可选的，如果不传这个参数redux会简单把dispatch作为属性注入给组件，可以手动当做store.dispatch使用。这也是为什么要科里化的原因。
做好以上流程Redux和React就可以工作了。简单地说就是：
1.顶层分发状态，让React组件被动地渲染。
2.监听事件，事件有权利回到所有状态顶层影响状态。
最基础的一点探索，未完待续。。
网友评论