深度解析 React useRef Hook 的使用

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/3034307824456296/posts 全部原创好文

CSDN： https://blog.csdn.net/qq_42753705?type=lately 全部原创好文

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

segmentfault 思否： https://segmentfault.com/u/jasonma1995/articles 全部原创好文

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