如何在React中處理非同步按鈕點(diǎn)擊和防抖問題

在React中處理非同步按鈕點(diǎn)擊和防抖問題可以通過以下幾種方法：

1. 使用useState和useEffect鉤子：通過useState來保存按鈕點(diǎn)擊狀態(tài)，然后在useEffect中監(jiān)聽這個狀態(tài)的變化，并在回調(diào)函數(shù)中處理異步操作。同時(shí)可以使用防抖函數(shù)來控制按鈕點(diǎn)擊頻率。

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

const App = () => {
  const [loading, setLoading] = useState(false);

  const handleClick = debounce(() => {
    setLoading(true);
    // 異步操作
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  }, 300);

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? 'Loading...' : 'Click Me'}
    </button>
  );
};

export default App;

2. 使用useReducer鉤子：可以使用useReducer來處理按鈕點(diǎn)擊狀態(tài)和異步操作的邏輯，并使用防抖函數(shù)來控制按鈕點(diǎn)擊頻率。

import React, { useReducer } from 'react';
import { debounce } from 'lodash';

const initialState = {
  loading: false,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_LOADING':
      return { ...state, loading: action.payload };
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const handleClick = debounce(() => {
    dispatch({ type: 'SET_LOADING', payload: true });
    // 異步操作
    setTimeout(() => {
      dispatch({ type: 'SET_LOADING', payload: false });
    }, 1000);
  }, 300);

  return (
    <button onClick={handleClick} disabled={state.loading}>
      {state.loading ? 'Loading...' : 'Click Me'}
    </button>
  );
};

export default App;

這些方法都可以在React中處理非同步按鈕點(diǎn)擊和防抖問題，具體選擇哪種方式取決于你的項(xiàng)目需求和個人喜好。