react-----dom对象和useref()_react useref获取dom标签

获取原生dom方法

方法1：
使用传统的docunment

方法二
直接从react处获取dom对象，创建存储dom对象的容器

使用useRef()这个钩子函数，钩子函数的注意事项：

1.钩子函数只能用于函数组件或者自定义钩子

2.钩子函数只能直接在函数组件中调用不能写在组件里面的函数中

3.将容器设置为想要获取dom对象元素的ref属性

<h1 ref={xxx}>...</h1>
1

react会自动将当前元素的dom对象，设置为容器的current属性

如果我们需要获得div的原生dom怎么办？

    const clickHandler=()=>{
        console.log(h1Ref);
        alert(h1Ref.current)
    }

    return <div className="App" ref={h1Ref}>
        <h1 id="header">我是标题</h1>
        <button onClick={clickHandler}>1</button>
        <button >2</button>
    </div>
1
2
3
4
5
6
7
8
9
10

你叫h1ref你放div那里干嘛？

你想获取谁就把它放在哪里，比如说你想获取h1的，你就放在这里

    return <div className="App" >
        <h1 id="header" ref={h1Ref}>我是标题</h1>
        <button onClick={clickHandler}>1</button>
        <button >2</button>
    </div>
1
2
3
4
5

我们的dom对象在h1Ref.current这个里面，我们的h1ref只是一个容器。

我们通过原生方法和我们react方法===最后的结果是true，说明是同一个东西

uesref()这个容器返回的就是一个普通的js对象{current:undefine}

思考:既然我们返回的就是这个为什么我不直接返回这个东西
所以我们创建一个js对象也可以代替useref()，自己创建的const h1ref={current:null}

会出现什么问题？？？？？
我们创建的对象在函数里面，每一次重新渲染都会创建新的对象，每一次都是一个新对象

什么时候使用useref()？
当需要一个对象不会因为组建的重新渲染而改变的时候就可以使用useRef()