关于react.js:深度解析-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/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… 全副原创好文