react中useRef的作用

以前我对useRef的使用印象好像只有在表单中经常用到，今天系统的整理了一下useRef

 

 敲重点！！！ 用useRef设定的值改变 是不会引发组件重新渲染的，useState才会
接下来主要来说说useRef的几个作用吧
1：用useRef获取React JSX中的DOM元素，获取后你就可以控制DOM的任何东西了 比如控制dom聚焦 给dom赋值

demo1：  这段代码的实现的功能就是点击button按钮将input框里输入的值展示到p标签内。
import React, { useState, useRef } from "react";
function App() {
  let [name, setName] = useState("Nate");
  let nameRef = useRef(); // 这里就是获取ref绑定的那个DOM元素值
  const submitButton = () => {
    setName(nameRef.current.value);     / 这里用setName设置name值时，是把input框里的输入值传入进去
  };
  return (
    <div className="App">
      <p>{name}</p>
 
      <div>
        <input ref={nameRef} type="text" />     / 这里的ref就是获取了这个input输入框，利用ref.current就可以获取这个DOM节点
        <button type="button" onClick={submitButton}>
          Submit
        </button>
      </div>
    </div>
  );
}
=====================================================================
demo2： 使用 useRef 创建的变量指向一个 input 元素，点击按钮后使 input 聚焦
  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：用useRef来保存变量，注意：useRef 每次都会返回相同的引用  useRef保存变量的好处就是  .current会拿到最新的 不会像useState 有时候会拿不到最新的

demo1： 利用useRef保存值
import React, { useRef, memo } from 'react';
const InnerTable = memo(function (props) {
const queryRef = useRef({
        invoiceCode: '',
        invoiceNumber: '',
    });
  
  
  return (
  <input  onChange={(e)=>{queryRef.current.invoiceCode=e.target.value}} placeholder="请输入发票代码"> </input>
     <input  onChange={(e)=>{queryRef.current.invoiceNumber=e.target.value}} placeholder="请输入发票号码"> </input>
  )
})