React 中功能组件上的 componentDidMount 事件

在 React 中，每个组件都有自己的生命周期方法。其中 componentDidMount 是挂载阶段的最后一个方法。在功能组件中使用 componentDidMount 可以在用户看到组件之前执行一些必要操作，例如获取数据或初始化状态。

使用 componentDidMount

首先，在一个 React 的功能组件中，要使用 componentDidMount 必须引入 React 包：

import React, { useEffect } from 'react';

然后，在组件内部使用 useEffect 函数来代替 componentDidMount。useEffect 会在每次渲染后都执行一次。如果需要模拟 componentDidMount 的功能，可以传递一个空的依赖数组作为第二个参数，这样 useEffect 只会在组件被挂载的时候执行一次。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 在组件挂载时执行以下操作
    console.log('组件被挂载了！');

    // 确保当组件 unmount 时清除掉一些操作
    return () => {
      console.log('组件被卸载了！');
    }
  }, []);

  return (
    <div>
      <p>这是一个功能组件</p>
    </div>
  )
}

示例

下面是一个完整的示例，该示例在组件挂载后向后端请求数据并在组件中展示：

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

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 向后端请求数据
    fetch('/api/data')
      .then(response => response.json())
      .then(setData)
      .catch(err => console.error(err));
  }, []); // 只在组件挂载时执行

  return (
    <div>
      <h1>数据列表</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  )
}

在这个示例中，组件挂载后 useEffect 函数会对后端发出一个请求。请求成功后 setData 函数会将响应的数据存储在组件的 state 中。最后，在组件最终渲染时，使用 state 中的数据渲染一个列表。

总结

componentDidMount 是 React 组件的生命周期方法之一。在功能组件中，使用 useEffect 可以代替 componentDidMount 来执行一些必要的操作，例如向后端请求数据或初始化组件状态。在 useEffect 函数中，传入一个空依赖数组作为第二个参数可以让 useEffect 函数只在组件挂载时执行。