解释一下 React Hooks

React Hooks 是让您无需编写类即可使用状态和其他 React 功能的函数。它们在 React 16.8 中引入，使功能组件能够处理状态管理、生命周期事件和副作用等逻辑。

定制挂钩需要什么？

自定义 React Hooks 允许您跨多个组件提取和重用逻辑。它们通过将状态逻辑封装到函数中来帮助保持组件清洁并减少重复。自定义 Hook 遵循与内置 Hook 相同的规则（例如，它们可以使用其他 Hook，如 useState、useEffect 等）。

显示代码：

import React, { useState } from 'react';


// Custom Counter Hooks
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(value=>value   1);
  const decrement = () => setCount(value=>value - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};
export default useCounter;

import useCounter from './useCounter';

const Counter = () => {

  // Using Counter Hooks
  const { count, increment, decrement, reset } = useCounter();

  return (
    

      
{count}
      Increment
      Decrement
      Reset
    
  );
};

自定义 Hook 规则

仅在顶层调用钩子：不要在循环、条件或嵌套函数内调用钩子。

仅从 React 函数调用钩子： 钩子应该在函数式组件或其他自定义钩子中使用。