React和Redux学习总结

1. prop和state的区别

• prop用于定义外部接口，state用于记录内部状态
• prop的赋值在外部世界使用组件时，而state的赋值在组件内部
• 组件不应该改变prop的值，而state存在的目的就是让组件来修改的

2. 生命周期之装载过程

• constructor：ES6中的每个类的构造函数。目的：初始化state;绑定成员变量this的环境。
• getInitialState：这方法只有用React.createClass方法创造的组件类才会发生作用
• getDefaultProps：这方法只有用React.createClass方法创造的组件类才会发生作用
• componentWillMount：在render之前调用，所有在componentWillMount中做的事情都可以在constructor中间做
• render：render应该是一个纯函数，完全根据this.state和this.props来决定返回的结果，而且不要产生任何的副作用。
• componentDidMount：render函数被调用完了之后，componentDidMount函数并不是会被立即调用的，componentDidMount被调用的时候，render函数返回的东西已经并发了渲染，组件已经被“装载”到了DOM树上。

3. 生命周期之更新过程

• componentWillReceiveProps：只要是父组件的render函数被调用，在render函数里面被渲染的子组件就会经历更新过程，不管父组件传给子组件的props有没有改变，都会触发子组件的ecomponentWillReceiveProps函数。
• shouldComponentUpdate：决定了一个组件什么时候不需要渲染。render和shouldComponentUpdate是React唯二两个要求有返回值的函数。render函数的返回结果将用于构造DOM对象，而shouldComponentUpdate函数返回一个布尔值，告诉React库这个组件在这次更新中是否要继续渲染。
• componentWillUpdate：如果组件的shouldComponentUpdate函数返回true，React接下来就会依次调用对应组件的componentWillUpdate、render和componentDidUpdate。
• render
• componentDidUpdate：和装载过程不同的是，当在服务器端使用React渲染时，这一对函数中的Did函数，也就是componentDidUpdate函数，并不是只在浏览器端才执行的，无论更新过程发生在服务器端还是浏览器端，该函数都会被调用。

4. 生命周期之卸载过程

• componentWillUnmount：当React组件要从DOM树上删除掉之前，对应的componentWillUnmount函数会被调用，所以这个函数适合做一些清理性的工作。

5. MVC框架

• Model（模型）负责管理数据，大部分业务逻辑也应该放在Model中;
• View（视图）负责渲染用户界面，应该避免在View中涉及业务逻辑
• Controller（控制器）负责接受用户输入，根据用户输入调用对应的Model部分逻辑，把产生的数据结果交给View部分，让View渲染必要的输出。

6. Redux基本原则

• 唯一数据源：应用的状态数据应该只存储在唯一的一个Store上
• 保持状态只读：保持状态只读，就是说不能直接修改状态，要求修改Store的状态，必须要通过派发一个action对象完成。当然，要驱动用户界面渲染，就要改变应用的状态，但是改变状态的方法不是去修改状态上值，而是创建一个新的状态对象返回给Redux，由Redux完成新的状态的组装。
• 数据改变只能通过纯函数完成：纯函数就是Reducer函数

7. Reducer函数

• Redux这个名字的前三个字母Red代表的就是Reducer。按照创造者的说法，Redux = Reducer + Flux
• reducer函数签名：reducer(state , action)
• 函数的第一个参数state是当前的状态，第二个参数action是接受到的action对象，而reducer函数要做的事情，就是根据state和action的值产生一个新的对象返回，注意reducer必须是纯函数，也就是说函数的返回结果必须完全由参数state和action决定，而且不产生任何副作用，也不能修改参数state和action对象。

8. 在Redux框架下，一个React组件基本上就是要完成两个功能

• 和Redux Store打交道，读取Store的状态，用于初始化组件的状态，同时还要监听Store的状态改变;当Store状态发生变化时，需要更新组件状态，从而驱动组件重新渲染；当需要更新Store状态时，就要派发action对象;
• 根据当前props和state，渲染出用户界面