使用useEffect模拟组件生命周期

使用useEffect模拟组件生命周期是React Hooks的一个常见用法，它能够模拟类组件的componentDidMount、componentDidUpdate和componentWillUnmount等生命周期方法。

使用useEffect的第一个参数为回调函数，它会在组件挂载后执行（类似componentDidMount），并且也会在组件更新时执行（类似componentDidUpdate）。第二个参数是一个数组，用来表示需要监测的props和state的变化，如果参数是空数组，则说明只在组件挂载和卸载时执行回调函数，不会在组件更新时执行。

接下来，我们来看两个示例说明：

示例1：模拟组件挂载后请求数据

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

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

  useEffect(() => {
    // 模拟请求数据
    setTimeout(() => {
      setData({ message: 'mock data' });
    }, 1000);
  }, []);

  return (
    <div>
      {data ? data.message : 'Loading...'}
    </div>
  );
}

export default App;

在这个示例中，我们使用了useState定义了一个名为data的状态变量，后面在useEffect中使用了一个定时器模拟了一个异步请求数据的场景。当组件挂载后，useEffect回调函数会被执行，由于传入的第二个参数是空数组，所以不会在组件更新时再次执行，而只会在组件挂载时请求一次数据。

示例2：模拟组件卸载前清除定时器

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

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(t => t + 1);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      current time: {time} s
    </div>
  );
}

function App() {
  const [showTimer, setShowTimer] = useState(true);

  return (
    <div>
      <button onClick={() => setShowTimer(!showTimer)}>
        {showTimer ? 'Hide' : 'Show'} Timer
      </button>
      {showTimer && <Timer />}
    </div>
  );
}

export default App;

在这个示例中，我们使用了一个Timer组件来模拟一个计时器的功能。在Timer组件内部，我们使用了useState定义了一个名为time的状态变量，并且使用useEffect模拟了一个定时器开启和关闭的场景。当组件挂载后，useEffect回调函数会被执行，由于传入的第二个参数是空数组，所以不会在组件更新时再次执行，只会在组件卸载前清除定时器。

在另外一个名为App的组件中，我们使用了一个showTimer的状态变量来控制Timer组件是否显示。通过点击按钮来改变showTimer的取值，以此触发Timer组件的挂载和卸载。