React 自定义 Hook

假如有两个组件都需要获取网络状态,我们可以取逻辑到自定义 Hook 中,避免代码重复

js 复制代码
import { useOnlineStatus } from './useOnlineStatus.js';

function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  function handleSaveClick() {
    console.log('✅ Progress saved');
  }
  return (
    <button disabled={!isOnline} onClick={handleSaveClick}>
      {isOnline ? 'Save progress' : 'Reconnecting...'}
    </button>
  );
}

export default function App() {
  return (
    <>
      <SaveButton />
      <StatusBar />
    </>
  );
}

// useOnlineStatus.js 自定义 Hook
import { useState, useEffect } from 'react';

export 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 的名称必须以 use 开头,然后紧跟一个大写字母,就像内置的 useState 或者示例 useOnlineStatus 一样。Hook 可以返回任意值。
自定义 Hook 共享的是状态逻辑,而不是状态本身 。对 Hook 的每个调用完全独立于对同一个 Hook 的其他调用。
每当组件重新渲染,自定义 Hook 中的代码就会重新运行。所以自定义 Hook 可以一直接收到最新的 props 和 state。
相关推荐
啊阿狸不会拉杆2 分钟前
第二十二章:Python-NLTK库:自然语言处理
前端·python·自然语言处理
萧寂1734 分钟前
html实现手势密码
前端·css·html
excel6 分钟前
webpack 核心编译器 八 节
前端
JoyZ10 分钟前
AI的时代学习还有意义吗?
前端
好_快11 分钟前
Lodash源码阅读-getSymbolsIn
前端·javascript·源码阅读
好_快12 分钟前
Lodash源码阅读-baseAssignValue
前端·javascript·源码阅读
好_快12 分钟前
Lodash源码阅读-copyObject
前端·javascript·源码阅读
qq. 28040339848 小时前
CSS层叠顺序
前端·css