React-自定义Hook与逻辑共享

红绿鲤鱼2024-11-22 21:42

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

在 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 的状态管理和生命周期功能。