当前位置：首页 > React

react如何实现异步更新

2026-03-10 15:53:00React

使用 `useState` 和 `useEffect` 进行异步更新

在 React 中，可以通过 useState 和 useEffect 结合实现异步更新状态。useEffect 用于处理副作用（如数据获取），并在异步操作完成后更新状态。

react如何实现异步更新

import { 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>;
}

使用 `useReducer` 处理复杂异步逻辑

对于更复杂的异步状态管理，useReducer 可以与异步函数结合，通过派发动作（action）来更新状态。

react如何实现异步更新

import { useReducer, useEffect } from 'react';

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

function AsyncReducerComponent() {
  const [state, dispatch] = useReducer(reducer, { data: null, loading: true, error: null });

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        dispatch({ type: 'FETCH_SUCCESS', payload: result });
      } catch (error) {
        dispatch({ type: 'FETCH_ERROR', payload: error.message });
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      {state.loading ? 'Loading...' : state.error || state.data.message}
    </div>
  );
}

使用 `async/await` 直接更新状态

在事件处理函数中，可以直接使用 async/await 实现异步更新。注意：useState 的更新函数本身是同步的，但可以在异步操作后调用。

import { useState } from 'react';

function AsyncEventHandler() {
  const [count, setCount] = useState(0);

  const handleClick = async () => {
    await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟异步操作
    setCount(prevCount => prevCount + 1); // 使用函数式更新确保准确性
  };

  return <button onClick={handleClick}>Count: {count}</button>;
}

使用第三方库（如 `React Query`）

对于数据获取和缓存管理，可以使用 React Query 等库简化异步状态更新。

import { useQuery } from 'react-query';

function ReactQueryComponent() {
  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>;
}