在 React 的生命周期中，最适合与服务端进行数据交互（如调用接口、请求后端数据）的函数是： componentDidMount()
原因说明
componentDidMount() 是 React 类组件生命周期中 组件挂载完成（渲染到真实 DOM）后 调用的函数。
在这个阶段：
-
组件已经被插入到页面中；
-
可以安全地进行 异步操作（例如网络请求、定时器、事件监听）；
-
不会阻塞首屏渲染。
示例：
class UserList extends React.Component {state = {users: [],};componentDidMount() {// 在这里进行接口请求fetch('https://api.example.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>);}
}
如果是函数式组件（Hooks）：
对应的生命周期是 useEffect()，并且第二个参数为空数组表示只在组件挂载时执行一次：
import { useEffect, useState } from 'react';function UserList() {const [users, setUsers] = useState([]);useEffect(() => {fetch('https://api.example.com/users').then((res) => res.json()).then((data) => setUsers(data));}, []); // [] 表示只在挂载时执行一次return (<ul>{users.map((u) => (<li key={u.id}>{u.name}</li>))}</ul>);
}
总结
| 场景 | 生命周期/Hook | 说明 |
|---|---|---|
| 类组件 | componentDidMount() |
组件挂载后发请求 |
| 函数组件 | useEffect(() => { ... }, []) |
模拟 componentDidMount |