useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内继续存在。

  • 命令式地获取及操作DOM：

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

  • useRef 创立一个不受组件刷新而影响的变量

    import React, { useRef, useState, useEffect } from "react";function UseRef() {  const [x,setX] = useState(0)  //函数组件只有更新了，a就会被从新为 0，所以函数组件须要借助useRef存储变量   let a = 0  //useRef能够生成一个变量，用于在函数组件中存储数据  let currentVal = useRef(0)  // 通过useRef创立并获取Dom元素  const inputElement = useRef(null);  useEffect(()=>{    console.log(`useEffect --- x:${x} --- currentVal:${currentVal.current} --- a:${a}`);  },[x])    return (    <>      <p>{x} ----</p>      <button onClick={()=>{ setX(v=>v+1) ;  currentVal.current+=2 ; a+=2 }}>+1</button>    </>  );}

    按钮点击+1，页面会打印：

    • useEffect --- x:1 --- currentVal:2 --- a:0
    • useEffect --- x:2 --- currentVal:4 --- a:0
    • useEffect --- x:3 --- currentVal:6 --- a:0

    因为a是一般变量，只有按钮点击，就会导致函数组件刷新，从新生成一个新的a，值永远都为0。所以在函数组件内如果想创立一个不受组件刷新而影响的变量，必须借助useRef生成

掘金： https://juejin.cn/user/303430... 全副原创好文

CSDN： https://blog.csdn.net/qq_4275... 全副原创好文

简书：https://www.jianshu.com/u/460... 全副原创好文

segmentfault 思否： https://segmentfault.com/u/ja... 全副原创好文

博客园 ：https://www.cnblogs.com/Jason... 全副原创好文