React 中 useRef 和 useState 的运用及差异

在 React 开发中，useRef和useState是两个常用的钩子函数，它们在功能和使用场景上有着明显的区别。

useState主要用于管理组件的状态。当状态发生改变时，组件会自动重新渲染以反映新的状态值。例如，我们可以使用useState来管理一个计数器：

import React, { useState } from'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

在上述示例中，count是状态变量，setCount是用于更新状态的函数。每次点击按钮，count的值增加，并触发组件的重新渲染。

而useRef则主要用于引用 DOM 元素或者保存一些在组件的整个生命周期中都不会引起重新渲染的值。比如，我们想要获取一个输入框元素的引用：

import React, { useRef } from'react';

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

  const handleClick = () => {
    inputRef.current.focus();
  };

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

在这个例子中，inputRef可以直接访问和操作对应的 DOM 元素。

总结来说，useState适用于需要触发组件重新渲染以更新界面展示的状态管理，而useRef更适合获取 DOM 元素引用或者存储一些不影响组件渲染的数据。

在实际开发中，根据具体的需求合理选择useRef和useState，能够让我们更加高效、灵活地构建 React 应用，提升开发体验和应用性能。