如何自定義React Hooks

要自定義React Hooks，可以按照以下步驟進行：

1. 創(chuàng)建一個函數(shù)，并以“use”開頭命名，這樣React就能識別它為自定義Hook。

2. 在函數(shù)內(nèi)部編寫邏輯，并返回一個值作為Hook的輸出。

3. 在組件中使用自定義Hook，可以像使用內(nèi)置的React Hooks一樣調(diào)用它。

下面是一個簡單的示例，演示如何自定義一個名為"useCounter"的Hook，用于計數(shù)功能：

import { useState } from 'react';

const useCounter = (initialCount) => {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  const reset = () => {
    setCount(initialCount);
  };

  return { count, increment, decrement, reset };
};

export default useCounter;

在組件中使用自定義Hook：

import React from 'react';
import useCounter from './useCounter';

const CounterComponent = () => {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default CounterComponent;

通過上述步驟，您可以輕松自定義React Hooks，并在應(yīng)用程序中重用這些邏輯。