面试题：React中useEffect如何模拟componentDidMount生命周期方法

Question

在React类组件中，我们可以使用componentDidMount方法在组件挂载后执行一些操作，如发起网络请求。请说明如何使用useEffect钩子函数来模拟这一行为，并写出一个简单的示例代码。

Answer 1

在React函数组件中，useEffect钩子函数可以模拟componentDidMount的行为。useEffect接收两个参数，第一个是回调函数，第二个是依赖数组。当依赖数组为空时，回调函数只会在组件挂载后执行一次，类似于componentDidMount。

示例代码如下：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里的代码在组件挂载后执行，模拟componentDidMount
    console.log('组件已挂载');
    // 可以在这里发起网络请求
    // 例如：fetch('https://example.com/api/data')
    //      .then(response => response.json())
    //      .then(data => console.log(data));

    // 如果有需要，可以返回一个清理函数，在组件卸载时执行
    return () => {
      console.log('组件即将卸载');
    };
  }, []);

  return <div>这是一个示例组件</div>;
}

export default MyComponent;