React-自定义Hook与逻辑共享

#题引：我认为跟着官方文档学习不会走歪路

在 React 中，自定义 Hook 是一种复用逻辑的方式。自定义 Hook 是一个 JavaScript 函数，名称以 use 开头，可以调用其他的 Hook, 可以返回任意值。

创建自定义Hook

假设你正在开发一款重度依赖网络的应用（和大多数应用一样）。当用户使用应用时网络意外断开，你需要提醒他, 该网络状态验证需要在多个组件中使用。

需要两个东西：
一个追踪网络是否在线的 state。
一个订阅全局 online 和 offline 事件并更新上述 state 的 Effect。

function useOnlineStatus() {const [isOnline, setIsOnline] = useState(true);useEffect(() => {function handleOnline() {setIsOnline(true);}function handleOffline() {setIsOnline(false);}window.addEventListener('online', handleOnline);window.addEventListener('offline', handleOffline);return () => {window.removeEventListener('online', handleOnline);window.removeEventListener('offline', handleOffline);};}, []);return isOnline;
}

组件内部可以这样使用该Hook

const isOnline = useOnlineStatus();

自定义 Hook 共享的是状态逻辑，而不是状态本身，如果有多个组件使用了useOnlineStatus， state 变量 isOnline是各自独立的。每当组件重新渲染，自定义 Hook 中的代码就会重新运行。

如果一个自定义 Hook 不使用任何内置 Hook（如 useState、useEffect 等），那么它实际上就变成了一个普通的工具函数。这种情况比较少见，因为自定义 Hook 的价值在于它们能够利用 React 的状态管理和生命周期功能。