react知识小结——深入浅出React和Redux

1.React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否大写，所以React组件必须大写。

2.注意

eject命令是不可逆的，就好像战斗机飞行员选择“弹射”出驾驶舱，等于是放弃了这架战斗机，是不可能再飞回驾驶舱的。所以，当你执行eject之前，最好做一下备份。

我们在命令行下执行下面的命令，完成“

npm run eject

这个命令会让改变一些文件，也会添加一些文件。

当前目录下会增加两个目录，一个是scripts，另一个是config，同时，package.json文件中的scripts部分也发生了

3.组件的生命周期：

componentWillReceiveProps（nextProps）

关于这个componentWillReceiveProps存在一些误解。在互联网上有些教材声称这个函数只有当组件的props发生改变的时候才会被调用，其实是不正确的。实际上，只要是父组件的render函数被调用，在render函数里面被渲染的子组件就会经历更新过程，不管父组件传给子组件的props有没有改变，都会触发子组件的componentWill-ReceiveProps函数。

注意，通过this.setState方法触发的更新过程不会调用这个函数，这是因为这个函数适合根据新的props值（也就是参数nextProps）来计算出是不是要更新内部状态state。state。更新组件内部状态的方法就是this.setState，如果this.setState的调用导致component-WillReceiveProps再一次被调用，那就是一个死循环了。

4.代码中使用了三个句点组成的扩展操作符（spread operator），这表示把state中所有字段扩展开，而后面对counterCaption值对应的字段会赋上新值，像下面这样的代码这样：

return {……state, [counterCaption]：state[counterCaption] + 1};

上面的代码逻辑上等同于下面的代码：

const newState =Object.assign({}, state);

newState[counterCaption] ++;

return newState;

像上面这样写，创造了一个newState完全复制了state，通过对newState的修改避免了对state的修改，不过这样写显得冗长，使用扩展操作符看起来更清晰简洁。

提示

扩展操作符（spread operator）并不是ES6语法的一部分，甚至都不是ES Next语法的一部分，但是因为其语法简单，已经被广泛使用，因为babel的存在，也不会有兼容性问题，所以我们完全可以放心使用。

在reducer中，绝对不能去修改参数中的state，如果我们直接修改state并返回state，代码如下，注意下面的代码不是正确写法：

export default (state, action) => {

const {counterCaption} = action;

switch (action.type) {

case ActionTypes.INCREMENT：

state[counterCaption] ++;

case ActionTypes.DECREMENT：

state[counterCaption] ——;

}

return state;

}

像上面这样写，似乎更简单直接，但实际上犯了大错，因为reducer应该是一个纯函数，纯函数不应该产生任何副作用。