20170612-點(diǎn)滴記錄

Dr_Noooo 發(fā)布于2019-08-29 12:46 / 1533人閱讀

摘要：簡單地說，加入當(dāng)前的值是，第一次調(diào)用傳給的參數(shù)是，第二次調(diào)用時(shí)，參數(shù)是，第三次調(diào)用時(shí)，參數(shù)是，最終的效果是讓變?yōu)椤Ｖ档靡惶岬氖牵诤瘮?shù)被調(diào)用時(shí)，并沒有改變，的改變要等到函數(shù)被重新執(zhí)行時(shí)或者函數(shù)返回之后才被改變。

less中串聯(lián)選擇器的表示

.container {
    &.content {
    
    }
}

上面的&符號表示串聯(lián)選擇器，&.content表示選擇到.container.content這樣的元素

react中函數(shù)式的setState用法

this.setState((oldState, oldProps)=>{
    // 根據(jù)當(dāng)前state和props計(jì)算新的state值
    ....
    return {newState}
})

如果傳遞給this.setState的參數(shù)不是一個(gè)對象而是一個(gè)函數(shù)

這個(gè)函數(shù)會接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是當(dāng)前的state值，第二個(gè)是當(dāng)前的props，這個(gè)函數(shù)返回一個(gè)對象，這個(gè)對象代表想要對this.state的更改。

例子

function increment(state, props){
    return {count: state.count+1}
}

function incrementMultiple(){
    // 假設(shè)默認(rèn)的state中的count的值為0,
    // 則第一次setState時(shí)向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)
}
// 調(diào)用上述函數(shù)，最終this.state.count會成為3

對于多次調(diào)用函數(shù)式setState的情況，React會保證調(diào)用每次increment時(shí)，state都已經(jīng)合并了之前的狀態(tài)修改結(jié)果。簡單地說，加入當(dāng)前this.state.count的值是0，第一次調(diào)用this.setState(increment),傳給increment的state參數(shù)是0，第二次調(diào)用時(shí)，state參數(shù)是1，第三次調(diào)用時(shí)，參數(shù)是2，最終incrementMultiple的效果是讓this.state.count變?yōu)?。

值得一提的是，在increment函數(shù)被調(diào)用時(shí)，this.state并沒有改變，this.state的改變要等到render函數(shù)被重新執(zhí)行時(shí)(或者shouldComponentUpdate函數(shù)返回false之后)才被改變。