React 系列之 useState 与 useRef

在 React 开发中，useState 与 useRef 是两个极为重要的 Hook，它们为函数式组件带来了强大的状态管理和数据引用能力。深入理解这两者的区别与应用场景，能够显著提升开发效率。

useState 是 React 提供的用于在不编写 class 的情况下使用 state 的 Hook。简单来说，它让函数式组件拥有了自己的状态。例如，在一个计数器组件中，我们可以这样使用：

import React, { useState } from'react';
const Counter = () => {
    const [count, setCount] = useState(0);
    const increment = () => {
        setCount(count + 1);
    };
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
};
export default Counter;

这里，useState 接收一个初始值 0，返回一个数组，第一项 count 是当前状态值，第二项 setCount 是用于更新状态的函数。每次点击按钮，setCount 被调用，状态更新，组件重新渲染。

而 useRef 则主要用于创建可变的引用。它返回一个可变的 ref 对象，其 .current 属性初始化为传入的参数值。useRef 的值在组件的整个生命周期内保持不变。比如，在需要获取 DOM 元素的场景下，useRef 就派上了用场：

import React, { useRef } from'react';
const InputFocus = () => {
    const inputRef = useRef(null);
    const focusInput = () => {
        inputRef.current.focus();
    };
    return (
        <div>
            <input ref={inputRef} type="text" />
            <button onClick={focusInput}>Focus Input</button>
        </div>
    );
};
export default InputFocus;

在这个例子中，inputRef 引用了输入框元素，通过调用 inputRef.current.focus() 可以将焦点设置到输入框上。

需要注意的是，useState 的更新会触发组件重新渲染，而 useRef 只是提供一个引用，不会因为 .current 的变化而导致组件重新渲染。当我们需要存储一些不影响组件渲染的数据时，useRef 是更好的选择；而当数据的变化需要驱动组件重新渲染时，useState 才是正确的工具。

掌握 useState 与 useRef 的特性和应用场景，能够让我们在 React 开发中更加游刃有余，编写出高效、简洁且易于维护的代码。