React中useEffect与生命周期钩子函数的对应关系说明

React中，useEffect和生命周期函数是需要对应的，使得我们可以在组件生命周期中做出相应的行为，比如在组件挂载或者更新时进行异步请求或者进行一些其他操作。本文将介绍useEffect和生命周期函数的对应关系，并进行一些示例说明。

useEffect和生命周期函数的对应

useEffect	生命周期函数	说明
useEffect(fn)	componentDidMount	组件挂载后执行一次
useEffect(fn, [])	componentDidMount	组件挂载后执行一次，不会被重复调用
useEffect(fn, [dep])	componentDidUpdate	dep的值发生变化时会被调用。
useEffect(() => { return () => {} })	componentWillUnmount	组件卸载前执行

示例

以下是两个useEffect的示例，分别对应不同的生命周期函数。

示例一：模拟componentDidMount生命周期函数

假设我们需要在组件挂载时发送一个异步请求来获取数据，并且将该数据存储到组件的状态中。

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

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

  useEffect(() => {
    axios.get('/api/data')
      .then(response => setData(response.data))
      .catch(error => console.log(error));
  }, []);

  return (
    <div>
      {data.map(item => <p>{item.name}</p>)}
    </div>
  );
}

export default MyComponent;

这里，我们使用useEffect(fn, [])来模拟componentDidMount生命周期函数，同时使用了useState来管理状态。

示例二：模拟componentDidUpdate生命周期函数

假设我们需要在组件更新时发送一个异步请求来更新数据，该请求只有在id发生变化时才会被发送。

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

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

  useEffect(() => {
    axios.get(`/api/data/${props.id}`)
      .then(response => setData(response.data))
      .catch(error => console.log(error));
  }, [props.id]);

  return (
    <div>
      <p>{data.name}</p>
    </div>
  );
}

export default MyComponent;

这里，我们使用useEffect(fn, [dep])来模拟componentDidUpdate生命周期函数，同时使用了useState来管理状态。当props.id发生变化时，useEffect会重新执行，并发送异步请求更新数据。