20170612-点滴记录

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之后)才被改变。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!