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应该是一个纯函数,纯函数不应该产生任何副作用。