useRef()

获取原生DOM对象的方法
1.可以使用传统的document来对dom进行操作
2.直接从react处获取DOM对象

步骤

1.创建一个存储dom对象的容器 使用useRef()钩子函数

钩子函数注意事项

1. react钩子函数只能用于函数组件或自定义组件
2. 钩子函数只能直接在函数组件中调用

2.将容器设置为想要获取DOM对象元素的ref属性
使用方法

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

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

import { useRef, useState } from "react";

const App = () => {
  const h1Ref = useRef(); //创建一个容器
  const clickHandler = () => {
    //通过id获取h1
    const header = document.getElementById("header");
    console.log(h1Ref.current === header);
  };

  return (
    <div className="app">
      <h1 id="header" ref={h1Ref}>
        我是标题{count}
      </h1>
      <button onClick={clickHandler}>1</button>
    </div>
  );
};

export default App;

此时concole.log返回true

useRef()
返回的就是一个普通的js对象
{current:undefined}
所以我们直接创建一个js对象 也可以替代useRef()
区别
我们创建的对象，组件每次重新渲染都会创建一个新对象
useRef()创建的对象 可以确保每次渲染获取到的都是同一个对象
当需要一个对象不会因为组件的重新渲染而改变时 就可以使用useRef()

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

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

import { useRef, useState } from "react";

let temp;

const App = () => {
  const [count, setCount] = useState(1);
  
  const h1Ref = {
    current: null,
  };

  console.log(temp === h1Ref);

  temp = h1Ref;

  const countAddHandler = () => {
    setCount((prevState) => prevState + 1);
  };

  return (
    <div className="app">
      <h1 id="header" ref={h1Ref}>
        我是标题{count}
      </h1>
      <button onClick={countAddHandler}>2</button>
    </div>
  );
};

export default App;

每一次点击2按钮，都返回false，

使用方法

 const h1Ref = useRef(); //创建一个容器
 ...
 <h1 ref={xxx}>...</h1>