react、redux个人学习笔记

react、redux个人学习笔记

本文记录了个人在学习过程中爬过的坑，仅供参考，大牛绕道，若有说的不对的地方欢迎批评指正，希望能帮到一些和我一样刚刚开始学习React的新手。

State、 Actions与Reducer

使用react与redux相结合的框架构造项目的时候，其核心无非就是store, actions与reducer三者相结合。核心思想非常好理解，store中的state用于存储数据以控制组件的状态，而组件所涉及的各种行为称为actions，但actions只是一个含有type属性和相应数据的JSON对象，并不处理数据，只是起到一个命令的作用。当某个action被dispatch调用后会根据action中的type属性值在reducer里寻找对应项，真正对数据进行操作的是reducer，然后reducer将action中携带的数据进行一定处理后更新到store的state中，而当state一旦发生改变，React中的diff算法会根据state的改变部分对相应组件进行最小程度的重新渲染。

React组件生命周期

这张图片很好的显示了React组件的生命周期，了解并牢记各个生命周期的执行顺序和触发条件的重要性我就不强调了。

值得一提的是componentWillReceiveProps这个环节，在该组件第一次被渲染的时候，该方法并不会被调用，而在第一次渲染之后props发生改变之后才会触发该函数。另外，当调用该组件的父组件触发render的时候，父组件中所有的子组件都会触发一次componentWillReceiveProps方法，即使其发生改变的state与某个子组件没有任何关系。因此，当你想在父组件中state添加某个值的时候，一定要三思而后行，可能会导致子组件意外的触发componentWillReceiveProps方法。

React组件内的state

除了store中的state外，各个组件也有自己的state，用于控制组件自身的状态，切勿将两个state弄混淆。需要注意的是，组件内调用this.setState(newState)之后，newState会被加入到一个队列中（如下图所示），不会立即执行更新，而是会触发一个判断条件来判断是否需要马上更新。所以当你调用this.setState(newState)之后，马上从state中拿值很可能是拿不到newState的。而且在对state中同一个值进行连续赋值的时候，state并不会重复更新，而是只会直接将相应的值更新为最后一次赋值结果。

浏览器控制台snapshot

关于数据传递，必须要提的是我在初学React时遇到的一个坑，就是当父组件通过props向子组件传递引用类型数据的时候，在子组件的constructor，componentWillMount等方法中拿不到this.props.data的值，而其它的如Boolean、String、Number类型数据能够正常获取。

constructor(props) { super(props); console.log(this); console.log(this.props.contentData); }

如上方代码，在Table组件中constructor方法里用控制台分别打印 this 和 this.props.data：

我们发现this.props.data是个空数组，然后再查看Table中的props：

我们发现Table里的props中的contentData却是拿到了的。为什么会出现这种前后不一致的情况呢。这个奇怪的现象其实是由两个原因导致的，第一个原因是因为chrome浏览器控制台在记录某个具有多层次的数据结构时，其实记录下来的只是该数据结构的一个快照（snapshot），意思是指控制台在执行记录时，其实只记录了这个数据结构的最表面一层，而当你之后再去查看内层数据的时候，内层数据的值才会被获取，也就是说你现在看到的内层数据的值都不是执行console.log代码的那一瞬间的值，而是你在控制台查看内层数据的这一时刻的值。而控制台仅仅只在执行代码的瞬间记录下一个快照的目的是为了让控制台最小程度的影响程序代码的执行，而一次性记录下整个复杂的数据结构则会损失一部分效率。

To be continued…