componentDidMount()是React 生命周期重要部分
先理解生命周期顺序
在 React 类组件（Class Component） 中，组件的主要生命周期顺序如下：
-
constructor() → 初始化 state、绑定方法
-
render() → 渲染 UI（但此时 DOM 还没插入页面）
-
componentDidMount() → ✅ 组件挂载完成（DOM 已经插入页面）
-
componentDidUpdate() → 更新后执行
-
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 可访问、不会阻塞首屏渲染，
所以它是发起网络请求和执行副作用的最佳时机。
