使用 React Hooks 管理状态和引用
在 React 中，Hooks 提供了一种新的方式来在函数组件中管理状态和引用。本文将介绍三个常用的 Hooks：useState、useEffect 和 useRef，并结合代码示例进行详细说明。
1. useState
useState Hook 允许函数组件在其内部存储和更新状态。它接受状态的初始值，并返回一个包含当前状态值和更新状态值的数组。
import React, { useState } from 'react';
function Example() {
// 声明一个新的状态变量，名为 "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
2. useEffect
useEffect Hook 允许函数组件执行副作用操作，如数据获取、订阅或手动修改 DOM。默认情况下，在每次组件渲染后都会执行。但可以通过第二个参数来控制 useEffect 的触发时机，传入一个数组，只有数组中的依赖项发生变化时，才会执行 useEffect 中的操作。如果省略第二个参数，则 useEffect 在每次渲染时都会执行。
import React, { useState, useEffect } from 'react';
function Example() {
React.useEffect(() => {
const timer = setInterval(() => {
setCount(val => val + 1);
}, 1000);
// 清除副作用的操作
return () => {
clearInterval(timer);
}
}, []);
}
3. useRef
useRef Hook 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（初始值）。它允许你在函数组件中存储任意可变值，类似于在 class 组件中使用实例属性。
import React, { useRef } from 'react';
function TextInputWithFocusButton() {
const inputRef = useRef(null);
const handleClick = () => {
// `current` 指向在渲染过程中被创建的 input 元素
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleClick}>Focus the input</button>
</div>
);
}
通过以上介绍，我们了解了如何使用 useState、useEffect 和 useRef Hooks 来管理状态和引用，这些 Hooks 极大地简化了函数组件的开发流程，提升了代码的可读性和可维护性。
