面试题：React函数组件中如何模拟componentDidMount

Question

在React函数组件中，没有像类组件那样直接的生命周期方法`componentDidMount`。请描述如何通过Hooks来模拟`componentDidMount`的功能，并且写出一段简单的代码示例。

Answer 1

1. 通过useEffect模拟componentDidMount功能：
   • 在React函数组件中，useEffect钩子可以用来处理副作用操作。当传递一个空数组[]作为useEffect的第二个参数时，它的回调函数只会在组件挂载后执行一次，这就模拟了componentDidMount的行为。
2. 代码示例：

import React, { useEffect } from'react';

const MyComponent = () => {
    useEffect(() => {
        // 这里的代码在组件挂载后执行，模拟componentDidMount
        console.log('Component has mounted');

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

    return (
        <div>
            <p>This is a React function component</p>
        </div>
    );
};

export default MyComponent;