React 中 useEffect 如何模拟 componentDidMount 和 componentWillUnmount？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

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

// www.javascriptcn.com code example
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 模拟 componentDidMount
    console.log('Component mounted');

    // 返回的函数模拟 componentWillUnmount
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行

  return <div>My Component</div>;
}

在这个例子中，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，可以在函数组件中实现类组件的生命周期方法的功能。

React 中 useEffect 如何模拟 componentDidMount 和 componentWillUnmount？