大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

react-resize-aware

react-resize-aware Hooks 只做一件事，即监听任何 HTML 元素上的 resize 事件。

react-resize-aware 是一个零依赖库，约 600 字节的 React Hook，开发者可以使用它来检测 resize 事件而无需依赖 interval、loop 循环、DOM 操作检测或 CSS 重绘。

其利用了 HTMLObjectElement 上的 resize 事件，适用于任何浏览器，而且超轻量。此外，其不会直接改变 DOM，一切都由 React 处理。

import React from "react";import useResizeAware from "react-resize-aware";const App = () => { const [resizeListener, sizes] = useResizeAware(); return ( <div style={{ position: "relative"}}> {resizeListener} Your content here. (div sizes are {sizes?.width} x {sizes?.height}) </div> );};use-hot-module-reload

该 React Hooks 在执行热模块重新加载后触发回调，对任何模块而不仅仅是使用它的模块有效。

use-hot-module-reload 适用于现代版本的 Webpack 和 Vite。 同时，如果其他捆绑程序公开了侦听更新的方法，则可以添加其他捆绑程序。 不受支持的捆绑器不会触发回调，但 Hooks 不应破坏任何内容。

import {useState, useCallback} from 'react'import {useHotModuleReload} from 'use-hot-module-reload'export function MyComponent() { const [lastHMRed, setLastHMRed] = useState('') const updateHMRTime = useCallback(() => setLastHMRed(new Date().toISOString()), []) useHotModuleReload(updateHMRTime) return <div>{lastHMRed && `Last hot module reload at: ${lastHMRed}`}</div>}use-local-storage-state

use-local-storage-state 是用于将数据保存在 localStorage 中的 React hook，具有以下突出特点：

过去 4 年积极维护生产准备就绪、支持 React 18 并发渲染支持 SSR、处理 Window storage 事件并更新浏览器选项卡、窗口和 iframe 之间的更改，且使用 storageSync： false 禁用当 localStorage 抛出错误并且无法存储数据时，使用内存 fallback。 提供 isPersistent API 让开发者通知用户数据当前未存储。import useLocalStorageState from 'use-local-storage-state'export default function Todos() { const [todos, setTodos] = useLocalStorageState('todos', { defaultValue: ['buy avocado', 'do 50 push-ups'] })}参考资料

https://github.com/FezVrasta/react-resize-aware

https://github.com/rexxars/use-hot-module-reload

https://github.com/astoilkov/use-local-storage-state

https://www.syncfusion.com/blogs/post/implementing-react-custom-hooks

https://medium.com/@maw1a/mastering-react-custom-hooks-2954d62181e