react知识小结——深入浅出React和Redux
2017-09-18 09:57
399 查看
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应该是一个纯函数,纯函数不应该产生任何副作用。
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应该是一个纯函数,纯函数不应该产生任何副作用。
相关文章推荐
- 深入浅出React+Redux(二:React 组件的生命周期)
- react-redux 和 redux-saga 小结
- 深入浅出React之第三章:使用redux管理应用状态
- react-redux使用小结
- 深入浅出React之第四章:推荐的Redux目录结构
- react-redux使用小结
- 深入浅出React+Redux(五:React-Redux)
- 深入浅出React之第六章:Redux和服务器通信
- 深入浅出React+Redux(三:Flux单向数据流,相关代码在github flux分支)
- 深入浅出React和Redux
- electron+react+redux+material-ui桌面应用小结
- react (五)Flux小结(内含MVC小知识)
- React.js学习知识小结(一)
- 深入浅出React+Redux(四:Redux - 组件的Context)
- 深入浅出React+Redux(六:模块化 React 和 Redux 应用)
- react webapp 开发小结
- React×Redux——react-redux库connect()方法与Provider组件
- 黑马程序员--html一些基础知识小结
- JVM相关知识小结
- 关于react-redux的一些看法