使用自定义 React Hook 实现响应式导航

简介

在这个项目中，你将学习如何创建一个名为 useWindowSize 的自定义 React Hook，以获取当前窗口大小，并使用它来有条件地在 Web 应用程序中渲染导航栏。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 实现 useWindowSize 自定义 Hook 以获取当前窗口大小
• 在 App 组件中使用 useWindowSize Hook，根据窗口宽度更新导航栏

🏆 成果

完成这个项目后，你将能够：

• 创建一个自定义 React Hook 来封装可复用的功能
• 利用 useState 和 useEffect Hook 来管理状态和副作用
• 根据当前窗口大小有条件地渲染组件

Skills Graph

实现 useWindowSize Hook

首先，打开编辑器。你可以在编辑器中看到以下文件。

├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── hooks
    │   └── useWindowSize.js
    ├── index.css
    ├── index.js
    ├── reportWebVitals.js
    └── setupTests.js

在这一步中，你将学习如何实现 useWindowSize 自定义 Hook 来获取当前窗口大小。

1. 打开位于 src/Hooks 目录下的 useWindowSize.js 文件。
2. 在这个文件中，导入必要的依赖项：

import { useEffect, useState } from "react";

3. 定义 useWindowSize 函数：

import { useEffect, useState } from "react";

export const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  const changeWindowSize = () => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
  };

  useEffect(() => {
    window.addEventListener("resize", changeWindowSize);

    return () => {
      window.removeEventListener("resize", changeWindowSize);
    };
  }, []);

  return windowSize;
};

解释：

• useWindowSize 函数返回一个包含当前窗口宽度和高度的对象。
• useState Hook 用于创建一个状态变量 windowSize 和一个用于更新它的函数 setWindowSize。
• changeWindowSize 函数用于在窗口大小改变时更新 windowSize 状态。
• useEffect Hook 用于添加一个 resize 事件的监听器，并在组件卸载时移除它。
• windowSize 对象从 useWindowSize 函数返回。

测试应用程序

1. 保存 useWindowSize.js 文件。
2. 在终端中使用 npm install 命令下载依赖项，等待依赖项下载完成，然后使用 npm start 命令启动项目。
3. 项目成功启动后，点击 “Web 8080” 在浏览器中进行预览。
4. 效果是当用户调整窗口大小时，底部内容会显示窗口宽度，顶部导航栏在小屏幕上会隐藏两个子菜单，在大屏幕上会显示三个菜单。

恭喜！你已成功实现 useWindowSize Hook 并在 App 组件中使用它根据窗口大小更新导航栏。

总结

恭喜！你已完成这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。