React 页面初始化获取请求生命周期：componentDidMount vs useEffect - 哪个更好？

在 React 中，页面初始化获取请求的生命周期有两种方式：类组件中的 'componentDidMount' 和函数组件中的 'useEffect'。

1. 使用 'componentDidMount' 的示例代码：

import React, { Component } from 'react';
import axios from 'axios';

class MyComponent extends Component {
  componentDidMount() {
    axios.get('https://api.example.com/data')
      .then(response => {
        // 处理获取到的数据
      })
      .catch(error => {
        // 处理错误
      });
  }

  render() {
    return (
      <div>
        {/* 页面内容 */}
      </div>
    );
  }
}

export default MyComponent;

在类组件中，'componentDidMount' 生命周期方法会在组件挂载后立即调用，可以在该方法中发送请求并处理返回的数据。

2. 使用 'useEffect' 的示例代码：

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

const MyComponent = () => {
  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        // 处理获取到的数据
      })
      .catch(error => {
        // 处理错误
      });
  }, []);

  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
}

export default MyComponent;

在函数组件中，'useEffect' Hook 可以在组件渲染完成后执行副作用操作，通过传递一个空数组作为第二个参数，可以保证只在组件挂载完成后执行一次。

两种方式都可以实现页面初始化获取请求的需求，但是使用 'useEffect' Hook 的函数组件更加简洁和易于理解，是 React 官方推荐的方式。