资讯详情

在 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