当前位置：首页 > article >正文

【React】useState 和 useRef：项目开发中该如何选择

article 2024/10/2 16:14:45

如果你正踏入用 React 进行网页开发的世界，那你可能已经遇到了像 useState 和 useRef 这样的术语。这两个 Hook 在构建交互性和动态组件时起着至关重要的作用。

下面，我们将探讨它们是什么，它们的功能，它们的区别，并通过一些易于理解的例子来具体说明应用场景。

`useState`: 反应式管理状态

当涉及到在函数式 React 组件中管理状态时，useState 就像是最有价值的球员（MVP）。它让你能够添加状态管理功能，使组件具有反应性并且视觉上可更新。

让我们看看这段小代码：

import React, { useState } from 'react';

function Counter() {
  // 声明状态变量 'count' 和用于更新它的函数 'setCount'
  const [count, setCount] = useState(0);

  const increment = () => {
    // 使用 'setCount' 函数更新 'count' 状态
    setCount(count + 1);
  };

  // 渲染包含当前计数和一个递增按钮的 div
  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={increment}>递增</button>
    </div>
  );
}

在这里，我们使用 useState(0) 声明了一个状态变量 count。点击“递增”按钮会更新状态并触发重新渲染。

那么当值重新渲染时会发生什么？

在重新渲染期间，状态保持其值，在渲染之间保持一致。React 高效地比较当前和前一状态以作出必要的更新。

`useRef`: 不触发重新渲染

不同于 useState，useRef 在其值改变时不会触发重新渲染。这对于保持对 DOM 元素的持久引用或存储值而不立即产生视觉反应非常有用。

让我们通过一个输入框的例子来具体说明：

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

function AutoFocusInput() {
  // 创建一个存储输入元素的引用
  const inputRef = useRef();

  // `useEffect` 用于处理函数式组件中的副作用
  useEffect(() => {
    // 当组件挂载时聚焦输入元素
    // 空依赖数组确保它仅运行一次
    inputRef.current.focus();
  }, []);
  
  // 渲染带有引用的输入元素
  return <input ref={inputRef} />;
}

在这个例子中，useRef 创建了 inputRef，这是一个在渲染之间持久存在的引用。即使组件重新渲染，inputRef 也保持不变。

那么当值重新渲染时会发生什么？

在上面的例子中，inputRef 在重新渲染期间不受影响，即使组件发生变化也能保证稳定性。

那什么时候选择 useRef 而不是普通变量呢？

你可能会疑惑为什么使用 useRef 而不是普通的 let 变量？关键在于 useRef 的独特属性使其与众不同：

渲染之间的持久性：与每次渲染都会被重新创建的 let 变量不同，useRef 在渲染之间保持其值，确保持久性。
避免不必要的重新渲染：修改 let 变量，即使没有视觉变化，也可能触发不必要的重新渲染。useRef 通过不引起重新渲染来避免这种情况。

选择 useRef 在需要在渲染之间保持值并且避免不必要的重新渲染的情况下是一种更为高效的方法。

forwardRef: 在组件间共享引用

有时候，你需要从父组件向子组件传递一个引用。这时 forwardRef 就派上了用场，允许使用 useRef 将引用传递给子组件。

让我们看一个例子：

import React, { forwardRef, useRef, useImperativeHandle } from 'react';

// 子组件
const ChildComponent = forwardRef((props, ref) => {
  // 声明一个内部引用变量用于输入元素
  const internalRef = useRef();

  // 使用 `useImperativeHandle` 向父组件暴露 focus 函数
  useImperativeHandle(ref, () => ({
    focus: () => {
      // 在内部引用上调用 focus 函数
      internalRef.current.focus();
    }
  }));

  // 渲染带有内部引用的输入元素
  return <input ref={internalRef} />;
});

// 父组件
function ParentComponent() {
  // 在父组件中创建一个引用
  const childRef = useRef();

  // 在父组件中触发 focus 函数的函数
  const handleButtonClick = () => {
    childRef.current.focus();
  };

  return (
    <div>
      {/* 使用引用渲染子组件 */}
      <ChildComponent ref={childRef} />

      {/* 触发子组件中 focus 函数的按钮 */}
      <button onClick={handleButtonClick}>聚焦输入框</button>
    </div>
  );
}