less中串联选择器的表示
.container {
&.content {
}
}
上面的&符号表示串联选择器,&.content
表示选择到.container.content
这样的元素
react中函数式的setState用法
this.setState((oldState, oldProps)=>{
// 根据当前state和props计算新的state值
....
return {newState}
})
如果传递给this.setState的参数不是一个对象而是一个函数
这个函数会接受两个参数,第一个参数是当前的state值,第二个是当前的props,这个函数返回一个对象,这个对象代表想要对this.state的更改。
例子
function increment(state, props){
return {count: state.count+1}
}
function incrementMultiple(){
// 假设默认的state中的count的值为0,
// 则第一次setState时向increment传递的state的count的值为0
this.setState(increment)
// this.state的count的值仍然为0
// 向increment传递的state的count的值为1
this.setState(increment)
// this.state的count的值仍然为0
// 向increment传递的state的count的值为2
this.setState(increment)
}
// 调用上述函数,最终this.state.count会成为3
对于多次调用函数式setState的情况,React会保证调用每次increment时,state都已经合并了之前的状态修改结果。简单地说,加入当前this.state.count的值是0,第一次调用this.setState(increment),传给increment的state参数是0,第二次调用时,state参数是1,第三次调用时,参数是2,最终incrementMultiple的效果是让this.state.count变为3。
值得一提的是,在increment函数被调用时,this.state并没有改变,this.state的改变要等到render函数被重新执行时(或者shouldComponentUpdate函数返回false之后)才被改变。