引言
React Hooks 是 React 16.8 版本引入的新特性，它允许我们在函数组件中“钩子”使用类组件的特性，如状态管理、生命周期等。其中，useState 和 useEffect 是两个最常用的 Hooks，本文将通过实战示例来解析它们的使用方法。
useState实战示例
useState 用于在函数组件中添加状态，它接受一个初始值作为参数，并返回一个包含当前状态值和更新状态值的数组。以下是一个简单的示例：
import React, { useState } from 'react';
function Counter() {
// 声明一个名为 "count" 的状态变量，初始值为 0
const [count, setCount] = useState(0);
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>点击我</button>
</div>
);
}
export default Counter;
在上面的示例中，我们使用 useState 声明了一个名为 count 的状态变量，并将其初始值设置为 0。setCount 是一个用于更新 count 的函数。每次点击按钮时，setCount 会将 count 的值增加 1。
useState进阶
惰性初始化state
useState 会在组件的首次渲染时执行，并且在之后的渲染中不会重新执行。这意味着，useState 的初始化值会被设置为传入的初始值，而不是组件挂载时的值。
function Counter() {
// 惰性初始化state
const [count, setCount] = useState(() => {
console.log('组件挂载');
return 0;
});
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>点击我</button>
</div>
);
}
在上面的示例中，即使我们修改了 useState 的初始值，它也不会影响组件的渲染。
获取上一次的值
我们可以通过在 useState 的回调函数中传递一个函数来获取上一次的值。
function Counter() {
const [count, setCount] = useState(0);
const increment = (prevCount) => {
return prevCount + 1;
};
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(increment(count))}>点击我</button>
</div>
);
}
在上面的示例中，我们定义了一个名为 increment 的函数，它接受上一次的值作为参数，并返回新的值。这样，我们就可以在更新状态时获取到上一次的值。
useEffect实战示例
useEffect 用于在函数组件中执行副作用操作，如数据请求、订阅事件等。它接受两个参数：一个回调函数和一个依赖数组。以下是一个简单的示例：
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`计数：${count}`);
}, [count]); // 依赖数组为[count]，仅在count变化时执行副作用
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>点击我</button>
</div>
);
}
export default Counter;
在上面的示例中，我们使用 useEffect 来执行一个副作用操作：在 count 变化时，打印出当前的计数。依赖数组为 [count]，这意味着只有当 count 发生变化时，副作用操作才会执行。
useEffect进阶
清理副作用
在某些情况下，我们可能需要在组件卸载时执行一些清理操作，例如取消订阅、清除定时器等。这时，我们可以使用 useEffect 的返回值来执行清理操作。
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
let timer;
useEffect(() => {
timer = setTimeout(() => {
console.log(`计数：${count}`);
}, 1000);
return () => {
clearTimeout(timer);
};
}, [count]); // 依赖数组为[count]，仅在count变化时执行副作用
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>点击我</button>
</div>
);
}
export default Counter;
在上面的示例中，我们使用 setTimeout 来模拟一个定时器，并在 useEffect 的返回值中清除定时器，以执行清理操作。
总结
本文通过实战示例解析了 useState 和 useEffect 的使用方法。在实际开发中，合理使用这两个 Hooks 可以帮助我们更好地管理组件的状态和副作用，提高代码的可读性和可维护性。