ref（获取DOM对象）

React中所有的操作默认都是在React元素上进行，然后再通过虚拟DOM应用到真实页面上的。这样做的好处我们不在赘述。虽然如此，在React中依然为我们提供了可以直接访问原生DOM对象的方式。ref就是干这个事的。

ref是reference的简写，换句话说就是用来获取真实DOM对象的引用。咱们丑话还是要说在前边，虽然可以获取到DOM对象，但是轻易不要这么做，如果必须要获取，也尽量是读取而不要修改，如果必需要修改也要尽量减少修改的次数，总之能不用就不用。

下边我们来看看，如何操作，还是以函数组件为例：

import React, {useRef} from 'react';

const MyComponent = () => {

    const divRef = useRef();

    const clickHandler = () => {
        console.log(divRef);
    };

    return (
            <div ref={divRef} onClick={clickHandler}>一个div</div>
           
    );
};

export default MyComponent;

我们要获取元素的真实DOM对象，首先我们需要使用useRef()这个钩子函数获取一个对象，这个对象就是一个容器，React会自动将DOM对象传递到容器中。代码const divRef = useRef()就是通过钩子函数在创建这个对象，并将其存储到变量中。

创建对象后，还需要在被获取引用的元素上添加一个ref属性，该属性的值就是刚刚我们所声明的变量，像是这样ref={divRef}这句话的意思就是将对象的引用赋值给变量divRef。这两个步骤缺一不可，都处理完了，就可以通过divRef来访问原生DOM对象了。

useRef()返回的是一个普通的JS对象，JS对象中有一个current属性，它指向的便是原生的DOM对象。上例中，如果想访问div的原生DOM对象，只需通过divRef.current即可访问，它可以调用DOM对象的各种方法和属性，但还是要再次强调：慎用！

尽量减少在React中操作原生的DOM对象，如果实在非得操作也尽量是那些不会对数据产生影响的操作，像是设置焦点、读取信息等。

useRef()所返回的对象就是一个普通的JS对象，所以上例中即使我们不使用钩子函数，仅仅创建一个形如{current:null}的对象也是可以的。只是我们自己创建的对象组件每次渲染时都会重新创建一个新的对象，而通过useRef()创建的对象可以确保组件每次的重渲染获取到的都是相同的对象。