当前位置：首页 > news >正文

react项目中当组件渲染的时候如何执行接口

news 来源：原创 2025/7/23 22:11:37

最近遇到一个场景，就是组件渲染的时候去调用接口进行数据回填。这个在vue中很简单，在created生命周期函数中，直接调用接口即可。但是react没有created生命周期，所以在react中我们需要用到useEffect钩子函数。

在 React 函数组件中使用useEffect时，要注意依赖项数组。如果依赖项数组为空，则 useEffect只会在组件挂载和卸载时执行；如果依赖项数组中有值，当这些值发生变化时，useEffect会重新执行。

副作用函数的概念：在 React 中，组件的主要职责是根据输入的props和state渲染 UI。但在实际应用中，我们常常需要执行一些与渲染无关的操作，比如数据获取、订阅事件、手动修改 DOM 等，这些操作就被称为副作用。useEffect允许在函数组件中执行这些副作用操作。

在类组件中可以使用componentDidMount生命周期函数实现相同效果。

useEffect

import React, { useEffect, useState } from 'react';// 模拟接口数据
const mockData = [{id: 1,title: '标题1111',body: 'qqqqqqq'},{id: 2,title: '标题222',body: 'wwwwww'},];// 封装模拟请求方法
const mockFetchData = () => {return new Promise((resolve) => {// 模拟请求耗时 1 秒setTimeout(() => {resolve(mockData);}, 1000);});
};function App() {// 使用 useState 来存储从模拟接口获取的数据const [data, setData] = useState([]);// 使用 useState 来存储加载状态const [isLoading, setIsLoading] = useState(true);// 使用 useState 来存储错误信息const [error, setError] = useState(null);useEffect(() => {const fetchData = async () => {try {// 调用模拟请求方法const response = await mockFetchData();// 将模拟响应数据存储到 state 中setData(response);} catch (err) {// 如果模拟请求出错，将错误信息存储到 state 中setError(err.message);} finally {// 请求完成后，将加载状态设置为 falsesetIsLoading(false);}};// 调用 fetchData 函数fetchData();}, []);if (isLoading) {// 如果正在加载，显示加载提示return <div>Loading...</div>;}if (error) {// 如果出现错误，显示错误信息return <div>Error: {error}</div>;}return (<div className="App">{/* 遍历渲染数据 */}<ul>{data.map(post => (<li key={post.id}><h2>{post.title}</h2><p>{post.body}</p></li>))}</ul></div>);
}export default App;

运行效果：

componentDidMount生命周期函数

import React from 'react';// 模拟接口数据
const mockData = [{id: 1,title: '类组件',body: 'qqqqqqq'},{id: 2,title: '使用componentDidMount生命周期函数在组件渲染的时候获取数据',body: 'wwwwww'},
];// 封装模拟请求方法
const mockFetchData = () => {return new Promise((resolve) => {// 模拟请求耗时 1 秒setTimeout(() => {resolve(mockData);}, 1000);});
};class App extends React.Component {// 类组件在构造函数中初始化数据constructor(props) {super(props);// 初始化状态this.state = {data: [],isLoading: true,error: null};}
// 该方法在组件挂载到 DOM 后立即调用，在这个方法里调用 fetchData 函数来获取数据，
// 这类似于函数组件中 useEffect 传入空依赖数组的情况componentDidMount() {// 在组件挂载后调用数据获取函数this.fetchData();}fetchData = async () => {try {// 调用模拟请求方法const response = await mockFetchData();// 将模拟响应数据存储到 state 中this.setState({ data: response });} catch (err) {// 如果模拟请求出错，将错误信息存储到 state 中this.setState({ error: err.message });} finally {// 请求完成后，将加载状态设置为 falsethis.setState({ isLoading: false });}}render() {const { data, isLoading, error } = this.state;if (isLoading) {// 如果正在加载，显示加载提示return <div>Loading...</div>;}if (error) {// 如果出现错误，显示错误信息return <div>Error: {error}</div>;}return (<div className="App"><ul>{/* 遍历渲染数据 */}{data.map(post => (<li key={post.id}><h2>{post.title}</h2><p>{post.body}</p></li>))}</ul></div>);}
}export default App;

end

如有误，不足欢迎指正补充。

useEffect

componentDidMount生命周期函数

end

相关文章：