当前位置：首页 > React

react如何实现异步更新

2026-01-24 07:45:44React

在 React 中实现异步更新

React 提供了多种方式来处理异步更新，以下是常见的实现方法：

使用 useState 和 useEffect 结合

通过 useState 管理状态，useEffect 处理副作用和异步操作。

import React, { useState, useEffect } from 'react';

function AsyncComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };
    fetchData();
  }, []);

  return <div>{data ? data.message : 'Loading...'}</div>;
}

使用 async/await 直接更新状态

在事件处理函数中直接使用异步逻辑。

const handleClick = async () => {
  const response = await fetch('https://api.example.com/data');
  const result = await response.json();
  setData(result);
};

使用第三方库如 axios

axios 提供了更简洁的 API 来处理 HTTP 请求。

import axios from 'axios';

useEffect(() => {
  axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.error(error));
}, []);

使用 useReducer 管理复杂状态

对于更复杂的状态逻辑，useReducer 可以提供更好的控制。

const initialState = { loading: false, data: null, error: null };

function reducer(state, action) {
  switch (action.type) {
    case 'FETCH_START':
      return { ...state, loading: true };
    case 'FETCH_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_ERROR':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

function AsyncComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    dispatch({ type: 'FETCH_START' });
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_ERROR', payload: error }));
  }, []);

  if (state.loading) return <div>Loading...</div>;
  if (state.error) return <div>Error: {state.error.message}</div>;
  return <div>{state.data && state.data.message}</div>;
}

使用 React Query 或 SWR

这些库专门用于数据获取和状态管理，简化了异步操作的处理。

react如何实现异步更新

import { useQuery } from 'react-query';

function AsyncComponent() {
  const { data, isLoading, error } = useQuery('fetchData', () =>
    fetch('https://api.example.com/data').then(res => res.json())
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>{data.message}</div>;
}