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

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

news 来源：原创 2025/6/7 10:46:58

最近遇到一个场景，就是组件渲染的时候去调用接口进行数据回填。这个在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 {
        // 请求完成后，将加载状态设置为 false
        setIsLoading(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 {
      // 请求完成后，将加载状态设置为 false
      this.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;