react-自定义hook

React 自定义 Hook 是一种用于共享组件逻辑的方式。它能够让你在不编写类组件的情况下复用状态逻辑。

要创建一个自定义 Hook，你只需要按照以下规则进行命名：
1. 以 "use" 开头，后面跟上驼峰命名的描述性名词，比如 "useCounter" 或者 "useFetch"。
2. 在自定义 Hook 内部，可以使用 React 的钩子（如 useState、useEffect 等），也可以使用其他自定义 Hook。

举个例子，假设你想要创建一个自定义 Hook 来处理计数器的逻辑：

import { useState } from 'react';

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

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

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

  return { count, increment, decrement };
}

function CounterComponent() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

在上面的例子中，我们创建了一个名为 `useCounter` 的自定义 Hook，它返回了一个包含计数器状态和增加/减少计数器的函数的对象。然后，我们可以在组件 `CounterComponent` 中使用这个自定义 Hook，来共享计数器的逻辑。

希望这个例子能够帮助你理解 React 自定义 Hook 的概念和用法。如果你有更多问题，可以继续提问！