19.自定义Hook函数封装数据请求（React）

1. 介绍

自定义Hook是React中一种用于封装和复用组件逻辑的机制。它们是以函数的形式存在，能够调用内置的Hook（如useState、useEffect等），并返回任何值或功能。自定义Hook的主要目的是避免代码重复，使组件更简洁，提高可读性和可维护性。

 先来看一个小例子

这段代码实现了一个简单的React组件，其中点击按钮可以切换显示"组件123"的状态。

import { useState } from "react";

function App() {
  
  const [show,setShow] = useState(true)
  //切换逻辑
  function toggle(){
    setShow(!show)
  }

  return (
    <div className="App">
      {show && <div>组件123</div>}
      <button onClick={toggle}>点我切换组件显示</button>
    </div>
  );
}

export default App;

运行结果

点击按钮可以控制组件显示

这个需求要实现是很简单的，但是如果有很多的组件需要控制显示，这样的代码就要重复写多次

const [show,setShow] = useState(true)
  //切换逻辑
  function toggle(){
    setShow(!show)
  }

如果能用一个函数把重复的逻辑封装起来，需要的时候就调用，即可以减少代码量，也能让维护更轻松，就像useState一样。

这样的函数我们可以叫做自定义的Hook。

现在我们来实现这样的Hook

用自定义Hook的实现

定义Hook：useToggle

function useToggle(){
  const [show,setShow] = useState(true)
  //切换逻辑
  function toggle(){
    setShow(!show)
  }

  return {
    show,
    toggle
  }
}

我们把上面的状态定义和切换逻辑放在函数中，并放入返回的对象中，这样通过闭包，只要在组件中调用这个Hook，就能拿到一组状态和控制函数，从而实现逻辑。

在 App 组件中使用

在 App 组件中，调用 useToggle 来获得 show 和 toggle：

function App() {
  
  const {show,toggle} = useToggle()

  return (
    <div className="App">
      {show && <div>组件123</div>}
      <button onClick={toggle}>点我切换组件显示</button>
    </div>
  );
}

现在， App 组件中不再直接管理 show 和 toggle 的逻辑，而是通过 useToggle 自定义Hook 来处理。

运行结果

点击切换

使用规则

• 自定义Hook只能在组件或其他自定义Hook中使用

• 只能在组件的顶部使用，不能在 if 、for 语句和其他逻辑中使用

用自定义Hook的好处是：

• 重用性：可以在其他组件中轻松使用相同的逻辑，只需调用函数即可。
• 可读性：代码变得更加简洁，逻辑清晰。