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。
相关推荐
惜.己几秒前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
乖女子@@@14 分钟前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo29 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
念念不忘 必有回响34 分钟前
js设计模式-装饰器模式
javascript·设计模式·装饰器模式
用户21411832636021 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
weixin_584121431 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
Zacks_xdc1 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|1 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊1 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design