React 中 useEffect 如何模拟 componentDidMount 和 componentWillUnmount？

推荐答案

在 React 中，useEffect 钩子可以用来模拟类组件中的 componentDidMount 和 componentWillUnmount 生命周期方法。具体实现如下：

-- -------------------- ---- -------
------ ------ - --------- - ---- --------

-------- ------------- -
  ------------ -- -
    -- -- -----------------
    ---------------------- ----------

    -- ------- --------------------
    ------ -- -- -
      ---------------------- ---- ----------
    --
  -- ---- -- -----------------

  ------ ------- ----------------
-

在这个例子中，useEffect 的第一个参数是一个函数，它在组件挂载时执行，相当于 componentDidMount。useEffect 还可以返回一个函数，这个返回的函数在组件卸载时执行，相当于 componentWillUnmount。通过传递一个空数组 [] 作为 useEffect 的第二个参数，可以确保这个 useEffect 只在组件挂载和卸载时执行。

本题详细解读

1. useEffect 的基本用法

useEffect 是 React 提供的一个钩子函数，用于在函数组件中执行副作用操作。它接收两个参数：

• 第一个参数是一个函数，称为“effect 函数”，它会在组件渲染后执行。
• 第二个参数是一个依赖数组，用于控制 useEffect 的执行时机。

2. 模拟 componentDidMount

当 useEffect 的依赖数组为空数组 [] 时，effect 函数只会在组件挂载时执行一次。这与类组件中的 componentDidMount 生命周期方法的行为一致。

useEffect(() => {
  console.log('Component mounted');
}, []);

3. 模拟 componentWillUnmount

useEffect 的 effect 函数可以返回一个清理函数，这个清理函数会在组件卸载时执行。这与类组件中的 componentWillUnmount 生命周期方法的行为一致。

useEffect(() => {
  console.log('Component mounted');

  return () => {
    console.log('Component will unmount');
  };
}, []);

4. 依赖数组的作用

依赖数组决定了 useEffect 的执行时机。如果依赖数组为空，useEffect 只会在组件挂载和卸载时执行。如果依赖数组中包含某些状态或属性，useEffect 会在这些状态或属性发生变化时重新执行。

useEffect(() => {
  console.log('Some state or prop changed');
}, [someState, someProp]);

5. 注意事项

• 如果依赖数组不为空，useEffect 会在每次渲染后根据依赖项的变化来决定是否执行 effect 函数。
• 如果依赖数组为空，useEffect 只会在组件挂载和卸载时执行，类似于 componentDidMount 和 componentWillUnmount。

通过合理使用 useEffect，可以在函数组件中实现类组件的生命周期方法的功能。