Ant Design Pro V5精讲（基础篇八）：useRef

应用场景

•    获取组件的实例，例如父组件需要调用子组件的方法时。
•    获取DOM对象，即用于绑定某些DOM，监听组件的事件
•    当成函数组件中的全局变量，跨渲染周期保存数据，即组件被多次渲染之后依旧不变的属性，state不能存储跨渲染周期的数据，因为state一旦修改了它，就会造成组件的重新渲染，而useRef不会重新引起渲染。

特性

• useRef返回一个可变的ref对象，其.currentn履性被初始化为传入参数（initalValue)。返回的ref对象在组件的生命周期内保持不变。
• curent值的改变不会引起组件重新渲染，相当于组件的全局变量。
• ref和render保持着一种引用关系，即地址的引用，它拿到结果一定也是最新的状态。

语法

const refContainer = useRef(initialValue);

用法示例

（1）获取DOM

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

（2）父组件调用子组件方法

import {useState, useImperativeHandle,forwardRef} from 'react';
// props子组件中需要接受ref
let ChildComp = (props,ref) => {
    // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
    useImperativeHandle(ref, () => ({
        // changeVal 就是暴露给父组件的方法
        changeVal: (newVal) => {
           
        }
    }));
    return (
        <div>{val}</div>
    )
}
ChildComp = forwardRef(ChildComp)


/* FComp 父组件 */
import {useRef} from 'react';
const FComp = () => {
    const childRef = useRef();
    const updateChildState = () => {
        // changeVal就是子组件暴露给父组件的方法
        childRef.current.changeVal(99);
    }
    return (
        <>
            <ChildComp ref={childRef} />
            <button onClick={updateChildState}>触发子组件方法</button>
        </>
    )
}

（3）组件全局变量用

import React, { useState, useEffect, useRef } from "react";
function App() {
  const [count, setCount] = useState(0);
  // 把定时器设置成全局变量使用useRef挂载到current上
  const timer = useRef();
  // 首次加载useEffect方法执行一次设置定时器
  useEffect(() => {
    timer.current = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);
  }, []);
  // count每次更新都会执行这个副作用，当count > 5时，清除定时器
  useEffect(() => {
    if (count > 5) {
      clearInterval(timer.current);
    }
  });
  return <h1>count: {count}</h1>;
}