React 第十七章 Hook useRef

2024-05-04 10:00
13人已看

React中的useRef是一个Hook函数，它可以用来在函数组件中创建一个可变的引用。它类似于类组件中的ref属性，但有一些不同之处。

useRef可以用来保存任意可变值，而不仅仅是DOM元素的引用。它可以在函数组件的多次渲染之间保持不变。

使用useRef的基本语法如下：

import React, { useRef } from 'react';

function MyComponent() {
  const ref = useRef(initialValue);
  // ...
}

在函数组件中创建一个ref，只需要调用useRef并传入一个初始值即可。初始值可以是任意类型的值。

useRef返回一个包含一个current属性的对象。这个current属性可以存储任意值，并且在函数组件的多次渲染之间保持不变。

下面是一些使用useRef的常见用途：

获取DOM元素的引用：可以使用ref属性将一个DOM元素绑定到ref.current上。

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <input ref={inputRef} />
  );
}

存储任意值：可以使用useRef来存储组件内部的任意可变值。

import React, { useRef } from 'react';

function MyComponent() {
  const countRef = useRef(0);

  function handleClick() {
    countRef.current += 1;
    console.log(countRef.current);
  }

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

在上面的例子中，我们使用了一个ref来存储一个计数器的值，并在每次点击按钮时增加计数器。

总的来说，useRef是一个非常方便的Hook函数，可以用来在函数组件中持久化存储可变值，以及获取和操作DOM元素的引用。