React中的useEffect是一个非常重要的Hook，它允许你在函数组件中执行副作用操作。这些操作通常包括数据获取、订阅或手动更改React组件中的DOM。useEffect为函数组件提供了类似于类组件中componentDidMount、componentDidUpdate和componentWillUnmount的功能，但更加灵活和强大。下面将详细介绍useEffect的使用，并通过代码示例进行说明。
基本概念
useEffect接收一个函数作为第一个参数，该函数内部可以执行任何副作用操作。可选的第二个参数是一个依赖项数组，用于控制副作用函数的执行时机。
- 无依赖项：如果第二个参数为空数组
[]，则副作用函数只会在组件挂载后执行一次，类似于componentDidMount。 - 有依赖项：如果第二个参数包含依赖项，则当依赖项发生变化时，副作用函数会重新执行，类似于
componentDidUpdate中特定条件触发更新。 - 清理函数：
useEffect还可以返回一个函数，该函数会在组件卸载或依赖项变化导致副作用函数重新执行前执行，用于清理副作用，类似于componentWillUnmount。
代码演示
示例1：无依赖项的useEffect
import React, { useState, useEffect } from 'react';
const Demo = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Component mounted or updated, but effect runs only once');
// 这里可以放置只在组件挂载时执行的代码
}, []); // 空数组表示没有依赖项
const handleIncrement = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
};
export default Demo;
在这个例子中，useEffect中的回调函数只会在组件挂载后执行一次，无论count状态如何变化，它都不会再次执行。
示例2：有依赖项的useEffect
import React, { useState, useEffect } from 'react';
const Demo = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Count is: ${count}`);
// 这里可以放置依赖于count变化的代码
}, [count]); // 依赖项数组包含count
const handleIncrement = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
};
export default Demo;
在这个例子中，每当count状态变化时，useEffect中的回调函数都会重新执行。
示例3：包含清理函数的useEffect
import React, { useState, useEffect } from 'react';
const Demo = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setTimeout(() => {
console.log(`Count after 2 seconds: ${count}`);
}, 2000);
// 清理函数
return () => {
clearTimeout(timer);
};
}, [count]); // 依赖项数组包含count
const handleIncrement = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
};
export default Demo;
在这个例子中，每当count变化时，都会设置一个2秒后执行的定时器。如果组件在定时器触发前卸载，清理函数会清除定时器，防止内存泄漏。
总结
useEffect是React函数组件中处理副作用的强大工具。通过合理设置依赖项和清理函数，可以精确控制副作用的执行时机和清理时机，从而编写出高效、可维护的React组件。以上示例展示了useEffect的基本用法和常见场景，希望能够帮助你更好地理解和使用它。
