为什么在componentDidMount()中请求数据？

componentDidMount()是React 生命周期重要部分

先理解生命周期顺序

在 React 类组件（Class Component） 中，组件的主要生命周期顺序如下：

1. constructor() → 初始化 state、绑定方法

2. render() → 渲染 UI（但此时 DOM 还没插入页面）

3. componentDidMount() → ✅ 组件挂载完成（DOM 已经插入页面）

4. componentDidUpdate() → 更新后执行

5. componentWillUnmount() → 销毁前执行

为什么在 componentDidMount() 请求数据？

主要有 三个核心原因

DOM 已经渲染完成，可以安全操作页面或数据

在 componentDidMount() 时，组件已经挂载到真实 DOM。

可以安全的：

• 访问 DOM 元素（如 ref）

• 发起网络请求（比如 axios.get()）

• 设置数据并更新视图

如果在 render() 里发请求，会造成：

• 多次重复请求（因为 render() 会频繁执行）

• 不可预测的副作用（React 期望 render 是“纯函数”）

确保不会阻塞首次渲染

在 componentDidMount() 之前，React 会先渲染空白或 Loading 状态的 UI，然后在挂载完成后再去请求数据。

优点：

页面能“立刻”显示出来（哪怕只是加载中），提升用户体验。

如果你在 constructor() 里发请求，会让页面白屏等待。

React 设计理念：数据副作用应放在生命周期钩子中

• “副作用”指：网络请求、订阅、操作 DOM、计时器等。

• React 推荐：所有副作用应放在生命周期钩子里。

• 对应 Hooks 写法中，等价于：

useEffect(() => {
  fetchData();
}, []); //  相当于 componentDidMount

实际示例

class UserList extends React.Component {
  state = {
    users: [],
  };

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => {
        this.setState({ users: data });
      });
  }

  render() {
    return (
      <ul>
        {this.state.users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    );
  }
}

首次渲染时：页面显示空列表或“加载中”
请求完成后：自动更新视图，显示用户数据

总结对比

生命周期阶段	是否推荐请求数据	原因
constructor()	❌	组件未挂载，请求可能阻塞首次渲染
render()	❌	必须是纯函数，不能有副作用
componentDidMount()	✅	DOM 已挂载，可安全执行异步操作
componentDidUpdate()	⚠️	仅在依赖更新时需要重新请求
componentWillUnmount()	❌	仅用于清理操作

一句话总结

因为 componentDidMount() 执行时组件已挂载、DOM 可访问、不会阻塞首屏渲染，
所以它是发起网络请求和执行副作用的最佳时机。