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。