React 中 ref 的使用

ref是reference的简写，它是一个引用，在react中，我们使用ref来操作DOM。

• 在react中，我们可以通过e.target来获取到一个事件对应的DOM。还可以通过ref来获取到元素对应的DOM. ref后边跟一个箭头函数，箭头函数会自动接收一个参数，这个参数名字可以随便定义，表示当前元素，this.input是一个引用，指向了input对应的DOM节点。

                    <input
                        id="inserArea"
                        className="input"
                        value={this.state.inputValue}
                        onChange={this.handleInputChange}
                        ref={(input) => {this.input = input}}
                    />

      handleInputChange(e){
        // 通过e.target获取DOM节点
        // const value = e.target.value; 

        // 通过ref获取DOM节点
        const value = this.input.value;
        this.setState(()=>({
            inputValue:value
        }))
    }

实际上，我们尽量不要使用ref,也就是尽量不要直接操作DOM，但是有时候我们业务场景非常复杂的时候，比如动画，不可避免的用到一些DOM标签，这个时候就要用ref来获取DOM。

• 当ref与setState合用的时候，会出现一些坑，DOM的获取并不及时，原因是setState是异步的，如果需要在数据变化(页面更新)之后获取DOM，我们要把获取DOM的语法，放在setState的第二个参数里，setState的第二个参数是一个函数，我们可以把获取DOM的逻辑放在里边。setState的第二个参数会在setState异步执行完毕之后执行。这样就能保证，当第二个参数执行的时候，页面已经被更新完了，这个时候获取页面上的DOM，肯定是不会错的。

 handleBtnCick(){
        this.setState((prevState)=>({
            list:[...prevState.list,prevState.inputValue],
            inputValue:''
        }))
        // 这里获取的DOM并不完整，因为先执行
        console.log(this.ul.querySelectorAll('div').length)
    }

 // setState有第二个参数，这个参数是一个函数，它会再setState异步执行完毕之后，也就是页面更新完毕后执行。
 handleBtnCick(){
        this.setState((prevState)=>({
            list:[...prevState.list,prevState.inputValue],
            inputValue:''
        }),()=>{
            console.log(this.ul.querySelectorAll('div').length)
        })
    }