如何定义和使用自定义Hooks

自定义 Hooks 是一个函数，用来提取组件的状态逻辑，根据不同功能可以有不同的参数和返回值；命名以 use 开头并返回一个数组。它能让你在函数组件中复用代码逻辑，且可以像使用 React 自带的 Hooks 一样使用。下面是定义和使用自定义 Hooks 的步骤：

定义自定义 Hooks：

import { useState, useEffect } from 'react';

function useCustomHook() {
    const [count, setCount] = useState(0);
    useEffect(()=> {
        console.log('自定义')
    }, count)
    const increment = () => {
        setCount(prevCount=> prevCount+1)
    }
    return [count, increment]
}

上面的自定义 Hook 名为 useCustomHook，它定义了一个 count 状态变量，以及一个 increment 函数用于增加 count 值。在 useEffect 中监听 count 的变化，并将 count 的值显示在页面标题上。

使用自定义 Hooks：

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

function App() {
  const [count, increment] = useCustomHook();

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

export default App;

上面的示例中，通过调用 useCustomHook 自定义 Hook，将其返回的 count 和 increment 分别赋值给 App 组件中的变量在 JSX 中使用这些变量，展示计数器的数值和点击按钮来增加计数器。

通过这种方式，我们可以在不同的函数组件中重复使用 useCustomHook 的逻辑，使代码更加模块化和可重用。