一、用途

ref属性允许我们使用react操作真实DOM

二、用法

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

ref属性的值是一个箭头函数，参数接收真实的DOM
通过ref将this.input设置为input标签，那么在方法中就可以直接操纵它

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

三、注意事项

由于setState方法是异步的，所以DOM操作应该放在setState中的回调函数中进行。

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

上面是一个列表，有一个按钮点击后就打印ul中li的个数

// 提交按钮处理函数
handleBtnClick(){
    // preState相当于this.state
    this.setState((preState) => ({
        list: [...preState.list, preState.inputValue],
        inputValue: ''
    }))
    console.log(this.ul.querySelectorAll('li').length)
}

运行会发现，打印的结果不正确，总是比真实的li少一个。这是因为setState是异步执行的，console.log()比setState早运行。
正确的写法是：

// 提交按钮处理函数
handleBtnClick(){
    // preState相当于this.state
    this.setState((preState) => ({
        list: [...preState.list, preState.inputValue],
        inputValue: ''
    }), function(){
        console.log(this.ul.querySelectorAll('li').length)
    })
}