React-Hooks----useRef()

前言

用于创建对DOM元素的引用。它还可以用于存储组件之间共享的变量，这些变量不会在组件重新渲染时发生更改。

用法

useRef() 可以接收一个初始值，返回一个包含 current 属性的对象，这个属性可以存储任意可变值，而且当修改它时不会重新渲染组件。

useRef() 的常见用法包括：

• 访问 DOM 节点的引用
• 保存定时器 ID 和其他一些无法通过 props 传递的变量
• 在组件的多次渲染之间存储值，而不需要使用useState() 来跟踪值的变化

下面是一个使用 useRef() 的示例代码：

import React, {
    
     useRef } from 'react';

function InputWithFocusButton() {
    
    
  const inputRef = useRef(null);

  function handleButtonClick() {
    
    
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={
    
    inputRef} />
      <button onClick={
    
    handleButtonClick}>Focus Input</button>
    </div>
  );
}

在这个例子中，我们创建了一个名为inputRef的引用，并将其传递给了 input 元素的 ref 属性。然后我们编写了一个函数 handleButtonClick()，当按钮被点击时，它将使用 current 属性来访问 input 元素的引用并聚焦该元素。