好的，以下是你要的文章。

ahooks 源码解读系列 - 4

本系列文章将对 ahooks 中的所有 Hooks 源码进行解读，希望通过解读 ahooks 的源码来熟悉自定义 Hooks 的写法，提高自己写自定义 Hooks 的能力。

在本文中，我们将重点解读以下几个 Hooks：

• useBoolean
• useCounter
• useToggle

这些 Hooks 都是非常常用的 Hooks，相信大家在平时开发中也经常会用到。通过解读它们的源码，我们可以学习到很多有用的知识。

useBoolean

useBoolean Hook 用于管理布尔状态。它接收一个初始值，并返回一个数组，其中第一个元素是当前布尔状态，第二个元素是两个函数，一个用于设置布尔状态为 true，另一个用于设置布尔状态为 false。

export function useBoolean(initialValue) {
  const [state, setState] = useState(initialValue);

  const setTrue = useCallback(() => {
    setState(true);
  }, []);

  const setFalse = useCallback(() => {
    setState(false);
  }, []);

  return [state, setTrue, setFalse];
}

从源码中我们可以看到，useBoolean Hook 内部使用了一个 useState Hook 来管理布尔状态。然后它定义了两个回调函数 setTrue 和 setFalse，用于设置布尔状态为 true 和 false。最后，它返回一个数组，其中第一个元素是当前布尔状态，第二个元素是两个回调函数。

useCounter

useCounter Hook 用于管理计数器状态。它接收一个初始值，并返回一个数组，其中第一个元素是当前计数器值，第二个元素是两个函数，一个用于增加计数器值，另一个用于减少计数器值。

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

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const decrement = useCallback(() => {
    setCount(count - 1);
  }, [count]);

  return [count, increment, decrement];
}

从源码中我们可以看到，useCounter Hook 内部使用了一个 useState Hook 来管理计数器状态。然后它定义了两个回调函数 increment 和 decrement，用于增加和减少计数器值。最后，它返回一个数组，其中第一个元素是当前计数器值，第二个元素是两个回调函数。

useToggle

useToggle Hook 用于管理一个布尔状态，并提供了一个切换该状态的函数。它接收一个初始值，并返回一个数组，其中第一个元素是当前布尔状态，第二个元素是切换该状态的函数。

export function useToggle(initialValue = false) {
  const [state, setState] = useState(initialValue);

  const toggle = useCallback(() => {
    setState((prev) => !prev);
  }, []);

  return [state, toggle];
}

从源码中我们可以看到，useToggle Hook 内部使用了一个 useState Hook 来管理布尔状态。然后它定义了一个回调函数 toggle，用于切换该状态。最后，它返回一个数组，其中第一个元素是当前布尔状态，第二个元素是切换该状态的函数。

总结

本文对 useBoolean、useCounter 和 useToggle 这三个 Hooks 的源码进行了详细的解读。通过解读这些 Hooks 的源码，我们可以学习到很多有用的知识。这些知识可以帮助我们编写自己的 Hooks，也可以帮助我们更好地理解 React Hooks 的工作原理。