题外话：
这只是一篇入门的文章而已，如果这些您已经会了，请跳过此章节。
自从学习了React之后，感觉在坑里出不来了，我觉得React真是一个巨坑，巨坑！如果想要使用React，单单使用React也可以，但是总感觉不对劲！发挥不出来React的真正作用！在开发的时候也体验不到那种流畅的感觉！所以我们得学习配套的一系列的东西，俗称 “React全家桶”
React的语法，可以用jsx的语法，也可以用ES6的语法，这个就看个人喜好了。而且在使用React的时候，一定要注意版本号，不同版本下面的API也是有很大区别的，甚至在有些版本里已经废弃了很多API。当你遇见一个问题解决不了的时候，回头看看版本号，没准就豁然开朗了！让你用React遇见解决不了的状态问题的时候，你可能需要使用Redux了！还有，尽量去官网或者GitHub上面去寻找第一手的答案。不要怕英文，看的多了自然你就慢慢融入进去了，否则 只能永远吃别人翻译过的！
Redux介绍：
Redux是用来管理状态的，比如我们需要服务器的返回值，或者localStore的存储数据，也或者是各种标签切换的状态，当状态非常多的时候，我们不确定到底是哪个状态引起了应用的错误，这个时候我们使用Redux可以轻松的查看state的变化状态！让所有问题变得都可以预测。
三大原则：
1，单一数据源。也就是整个应用中只有一个store，这个store中存储state的信息
2，state的状态是只读的，不能直接修改的，唯一修改state的方式就是通过action的方式
3，使用纯函数来进行修改，纯函数就是输入相同，输出相同。
Redux组成
1，Action：action就是数据载体！也就是相当于一个数据包！action中必须存在一个type属性，这个type属性表明要执行的动作！同时这个action也是store的唯一数据来源！如果想要修改store中state的数据。
例如：定义一个普通的action
const Action = {
type:"ADD",
todo:"Go Home"
}
可以通过：
store.dispatch( Action ) 这样就是相当于向store发送数据
2，Reducer
Action只是要发送给store的数据包，但是并没有进行数据处理！所以数据在发送到store的时候，需要被reducer进行处理。
reducer是一个纯函数，接收两个参数 一个旧的state，一个action。返回一个新的state！！reducer中绝对不能进行以下三种操作
reducer也是createStore中的参数
let Store = createStore( reducer );
1，修改传入的参数，也就是说reducer中这两个参数是固定的，旧的state，和action 。
2，执行有副作用的操作，比如各种请求啊，跳转啊等等！
3，不要执行非纯函数。（至于什么是非纯函数，我理解的就是返回值不确定的这种。比如Math.random() ）
在这里着重强调一下： reducer 函数中state参数！ 我们都知道reducer接收一个旧的state，返回一个新的state， 那么这个旧的state是整个应用的state还是reuder对应的那一段state呢？ 我之前在阅读文档的时候这段非常疑惑，如果每次接收的是整个应用的state,如果一个应用的state层级非常的深！那么这是非常消耗性能的！ 但是等我又阅读文档的时候我发现 这个state其实只是reducer处理的对应的state。并不是全局state；但是返回的时候必须返回一个全新的state,也就是说，这其中我们是有一个合并操作！ 把reducer处理的那部分state 同全局state进行了一个对比，把同全局state差异化的地方进行了合并！
var globalState = {
name:"Tom",
age:20,
add:"BJ"
LikeGirl:[ '安吉娜朱丽叶' , '唐嫣' , ' 凤姐 ' ] ；
}
/****定义修改LikeGirl数据****/
const LikeGirl = {
type:"changeLikeGirl ",
arr: '郭德纲'
}
var initState = { LikeGirl :[] }
function Reducer(state , action )
switch ( action.type ){
case "changeLikeGirl" :
return {
LikeGirl : [...globalState . LikeGirl , action.arr ]
}
}
在上面的代码中，定义了一个全局state , 然后发送一个LikeGirl的action ，在这个action中，携带了一个arr属性，这个值是我们准备合并到全局state中的值。 通过定义的type字段，来执行不同的动作，最后返回一个新的全局state，这个全局state中就包含了action中携带的值！
3，store
store就是一个大仓库，仓库中存储这一个state，state中包含各种各样的数据
store定义了几种方法
store.dispatch ()通过这个方法，向store中发送action
store.getState() 通过这个方法可以获取store中state的信息
store.subscribe( listener ) 给store设置监听事件，当store中的state发生改变的时候，就会触发回调函数。
store.subscrbie( listener ) 这个返回值来取消监听事件！
4，数据流
Redux中执行严格的单向数据流动。
Redux中应用数据的声明周期遵循下面4个步骤。
1，调用store.dispatch( action )
这个回调函数可以在任何地方进行调用，比如组件,XHR，定时器！
2，Redux中调用传入的reducer函数。
3，根reducer应该把多个子reducer输出合并到一个单一的state树
4，Redux Store中保存了根reducer 返回的完整的state树！
React-redux
如果想要React 和 Redux 一起使用 ，需要使用react-redux这个绑定库。
在这个绑定库当中，提供了2个重要的内容 一个是Provider，一个是connect()
<Provider store = { store }>
<MyApp />
</Provider>
使用Provider来包裹我们的组件，这样默认在所有组件内部都可以使用store中的数据
connect这个方法是重中之重！这个方法接收4个参数。
connect ( mapStateToProps , mapDispatchToProps , merProp ,options)
mapStateTopProps:这个函数接受一个参数state，返回一个对象。把state中返回对象的key当做props传递到组件中，这样在组件内部可以通过this.props[key]来获取到对应的值。
这个方法也叫输入方法，通俗的说也就是将state映射到UI上的数据
mapDispatchToProps:这个方法也叫做输出方法，将用户的操作转换成action对象，传递到store中！
也就是将用户对UI的操作映射为action,用来建立UI组件的参数到store.dispatch方法的映射！
网友评论