如何使⽤React的useEffect Hook来模拟componentDidMount和componentDidUpdate？

React的 useEffect Hook 是⼀个强⼤的⼯具，它允许你在函数组件中执⾏副作⽤操作，包括

在组件挂载后（模拟 componentDidMount ）以及组件更新后（模拟 componentDidUpdate ）

执⾏的代码。

默认情况下， useEffect 会在组件挂载和每次更新后执⾏。如果你想要模拟componentDidMount 只在组件挂载时执⾏，你可以将 useEffect 的第⼆个参数（依赖项数 组）留空。如果你想要模拟 componentDidUpdate （即在组件更新后执⾏，但不在挂载时执 ⾏），你可以使⽤⼀个空数组作为依赖项。然⽽，实际上你不需要为 useEffect 传递⼀个空数组来 模拟 componentDidUpdate ，因为默认情况下它就是这样⼯作的。

下⾯是如何使⽤ useEffect 来模拟 componentDidMount 和 componentDidUpdate的⽰例：

模拟 componentDidMount

import React, { useEffect, useState } from 'react';

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

useEffect(() => {
// 这⾥的代码会在组件挂载后执⾏，类似于 componentDidMount
console.log('Component mounted or updated, count:', count);

// 清理函数（可选），在组件卸载前或下次effect执⾏前调⽤
return () => {
console.log('Component will unmount');
};
}, []); // 注意：空数组作为依赖项，但实际上在这个例⼦中不需要，因为默认就会执⾏

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

模拟 componentDidUpdate（不需要空数组）

import React, { useEffect, useState } from 'react';

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

useEffect(() => {
// 这⾥的代码会在组件挂载后以及每次更新后执⾏，类似于 componentDidMount 和
componentDidUpdate
console.log('Component mounted or updated, count:', count);

// 清理函数（可选）
return () => {
// 这会在组件卸载前或下次effect执⾏前调⽤
console.log('Component will unmount or update');
};
}); // 注意：没有传递依赖项数组，所以effect会在每次渲染后执⾏

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

在第⼆个⽰例中，我们没有为 useEffect 传递依赖项数组，因此它会在每次渲染后执⾏，包括组件挂载和每次更新。如果你想在组件更新时执⾏某些操作，但不在挂载时执⾏，你需要将某些状态或props值作为依赖项传递给依赖项数组。然⽽，在⼤多数情况下，你不需要这样做，因为 useEffect 默认就会在挂载和更新后执⾏。

程序员玫玫：堪称2024最强的前端面试场景题，已帮助512人成功拿到offer