React的useRef的深度解析与应用指南

1. 前言

在React的函数式组件开发中，useRef是一个非常实用的钩子，它为我们提供了在组件渲染周期之间持久化存储值的能力，同时不会触发组件的重新渲染。本文将深入探讨useRef的工作原理、常见应用场景以及使用时的注意事项。

2. 基本概念与工作原理

useRef是React提供的一个钩子函数，其主要功能是创建一个可变的ref对象。这个对象在组件的整个生命周期内保持不变，无论组件渲染多少次，ref对象始终指向同一个值。其基本语法如下：

javascript 复制代码

const refContainer = useRef(initialValue);

useRef返回的ref对象有一个特殊的current属性，用于存储和访问值。初始时，current属性被设置为传入的initialValue。需要注意的是，修改current属性不会触发组件的重新渲染，这是useRef与状态管理（如useState）的重要区别。

3. 核心应用场景

下面是一些常见的使用场景：

3.1. 访问DOM元素

useRef最常见的用途之一是获取DOM元素的引用，从而可以直接操作DOM。例如：

javascript 复制代码

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到DOM上的文本输入元素
    inputEl.current.focus();
  };
  
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>聚焦输入框</button>
    </>
  );
}

在这个例子中，useRef创建了一个ref对象inputEl，并将其绑定到input元素的ref属性上。当按钮被点击时，我们可以通过inputEl.current访问到实际的DOM元素，然后调用其focus()方法。

3.2. 存储组件间持久化数据

useRef还可以用于在组件的多次渲染之间存储数据，而不会触发重新渲染。这对于需要在组件生命周期内保持某些值的场景非常有用。例如：

javascript 复制代码

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

function Timer() {
  const intervalRef = useRef();
  const [count, setCount] = useState(0);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    
    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

  return <div>计时: {count} 秒</div>;
}

在这个计时器组件中，我们使用useRef存储了setInterval返回的计时器ID。这样在组件卸载时，我们可以通过intervalRef.current访问到这个ID，并清除计时器，避免内存泄漏。

3.3. 避免不必要的重新渲染

在某些情况下，我们可能需要在组件内部存储一些值，但又不希望这些值的变化触发组件的重新渲染。这时，useRef是一个理想的选择。例如：

javascript 复制代码

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

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const isMounted = useRef(true);

  useEffect(() => {
    fetchData().then(result => {
      // 只有当组件仍然挂载时才更新状态
      if (isMounted.current) {
        setData(result);
        setLoading(false);
      }
    });
    
    return () => {
      // 组件卸载时更新标记
      isMounted.current = false;
    };
  }, []);

  return loading ? <div>加载中...</div> : <div>{data}</div>;
}

在这个数据获取组件中，我们使用useRef创建了一个isMounted标记，用于跟踪组件是否仍然挂载。在异步操作完成后，我们首先检查这个标记，只有在组件仍然挂载的情况下才更新状态，从而避免在组件卸载后更新状态导致的警告。

4. useRef与useState的对比

虽然useRef和useState都可以用于存储数据，但它们有本质的区别：

触发渲染 ：修改useState存储的值会触发组件重新渲染，而修改useRef的current属性不会。
数据持久性 ：useState的值在每次渲染时都是固定的，而useRef的current属性可以随时修改。
适用场景 ：useState适用于需要根据数据变化更新UI的场景，而useRef适用于存储不影响UI的数据或访问DOM元素。

5. 使用useRef的注意事项

避免在渲染过程中修改current属性 ：修改useRef的current属性不会触发重新渲染，但如果在渲染过程中修改它，可能会导致难以调试的问题。
注意内存泄漏 ：当使用useRef存储DOM元素或其他资源时，要确保在组件卸载时正确清理这些资源，避免内存泄漏。
不要滥用useRef ：虽然useRef很强大，但应该谨慎使用。过度使用useRef可能会导致代码变得难以理解和维护，应该优先使用状态管理和数据流模式。

6. 总结

useRef是React中一个非常有用的钩子，它为我们提供了在组件渲染周期之间持久化存储值的能力，同时不会触发重新渲染。通过合理使用useRef，我们可以更方便地访问DOM元素、存储组件间持久化数据以及优化性能。但在使用过程中，我们也需要注意避免常见的陷阱，确保代码的健壮性和可维护性。

本次分享就到这儿啦，我是鹏多多，深耕前端的技术创作者，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

PS：在本页按F12，在console中输入document.getElementsByClassName('panel-btn')[0].click();有惊喜哦~

往期文章