一、用途

ref屬性允許我們使用react操作真實(shí)DOM

二、用法

<input ref={(input) => this.input = input}/> 

ref屬性的值是一個(gè)箭頭函數(shù)，參數(shù)接收真實(shí)的DOM
通過(guò)ref將this.input設(shè)置為input標(biāo)簽，那么在方法中就可以直接操縱它

useDom(){
  console.log(this.input)
}

三、注意事項(xiàng)

由于setState方法是異步的，所以DOM操作應(yīng)該放在setState中的回調(diào)函數(shù)中進(jìn)行。

<ul ref={(ul) => this.ul = ul}>
        {
            this.getTodoItem()
        }
</ul>

上面是一個(gè)列表，有一個(gè)按鈕點(diǎn)擊后就打印ul中l(wèi)i的個(gè)數(shù)

// 提交按鈕處理函數(shù)
handleBtnClick(){
    // preState相當(dāng)于this.state
    this.setState((preState) => ({
        list: [...preState.list, preState.inputValue],
        inputValue: ''
    }))
    console.log(this.ul.querySelectorAll('li').length)
}

運(yùn)行會(huì)發(fā)現(xiàn)，打印的結(jié)果不正確，總是比真實(shí)的li少一個(gè)。這是因?yàn)閟etState是異步執(zhí)行的，console.log()比setState早運(yùn)行。
正確的寫(xiě)法是：

// 提交按鈕處理函數(shù)
handleBtnClick(){
    // preState相當(dāng)于this.state
    this.setState((preState) => ({
        list: [...preState.list, preState.inputValue],
        inputValue: ''
    }), function(){
        console.log(this.ul.querySelectorAll('li').length)
    })
}