React 自定义 Hook

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

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。