React 第十七章 Hook useRef

最新推荐文章于 2024-07-12 17:07:46 发布

静水流深，沧海一粟

最新推荐文章于 2024-07-12 17:07:46 发布

阅读量323

点赞数 3

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/aXin_li/article/details/138166374

版权

react 专栏收录该内容

41 篇文章 12 订阅

订阅专栏

本文介绍了React中的useRefHook，它允许在函数组件中创建可变引用，用于持久存储值或获取DOM元素。useRef不同于类组件的ref，其current属性可在多次渲染间保持不变，并展示了其在获取DOM元素引用和存储任意值上的应用。

摘要由CSDN通过智能技术生成

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元素的引用。