use-resize-observer版本迁移指南：从v9到v10的关键变化

use-resize-observer版本迁移指南从v9到v10的关键变化【免费下载链接】use-resize-observerA React hook that allows you to use a ResizeObserver to measure an elements size.项目地址: https://gitcode.com/gh_mirrors/us/use-resize-observeruse-resize-observer是一个实用的React hook它允许你使用ResizeObserver来测量元素的尺寸。随着v10版本的发布这个库进行了一系列重要更新包括现代化工具链、添加React 19支持以及修复了多个长期存在的问题。本文将详细介绍从v9迁移到v10的关键变化和具体步骤帮助你顺利完成升级。为什么需要迁移到v10v10版本不仅带来了新功能还对库的结构和依赖进行了优化。主要改进包括现代化的工具链提升了构建效率和代码质量添加了React 19支持同时保持对React 18的兼容移除了不必要的依赖使包体积更小修复了多个长期存在的bug提升了稳定性和可靠性主要的破坏性变化1. 默认导出已移除使用命名导出这是最主要的变化你需要将默认导入改为命名导入-import useResizeObserver from use-resize-observer; import { useResizeObserver } from use-resize-observer;为什么这样改因为从同时具有CommonJS输出的包中导出默认值是interop错误的持续来源。TypeScript手册建议CommonJS库避免默认导出。命名导出在ESM和CJS中都有一个明确的形状。2.use-resize-observer/polyfilled入口点已移除如果你之前使用了polyfilled版本需要改为标准导入-import useResizeObserver from use-resize-observer/polyfilled; import { useResizeObserver } from use-resize-observer;如果你依赖于捆绑的polyfill可以在应用的入口点自行polyfillResizeObserverimport { ResizeObserver } from juggle/resize-observer; if (!window.ResizeObserver) { window.ResizeObserver ResizeObserver; }这样应用程序可以控制polyfill而不是由库来控制。3. 零运行时依赖juggle/resize-observer依赖项已随polyfilled入口点一起移除。该包现在没有运行时依赖项这有助于减小你的项目体积并减少潜在的依赖冲突。4.react-dom不再是 peer 依赖react-dom不再被列为peer依赖react仍然是唯一的peer依赖。如果你之前的包管理器警告缺少react-dompeer现在这个警告应该消失了。5. 支持的React版本现在需要React 18.2或更高版本任何旧版本都不再支持。peer范围没有上限18.2因此未来的React主版本无需在此处发布即可被接受。6. 输出目标为ES2020不再支持IE 11构建不再转译为ES5 / IE 11。如果你必须支持非常旧的浏览器可以在自己的构建过程中转译node_modules/use-resize-observer。7. 只能导入包根目录该包现在声明了一个exports映射因此只有use-resize-observer本身可以被解析。以前深入导入dist/是有效的以前没有exports字段现在会失败并显示ERR_PACKAGE_PATH_NOT_EXPORTED-import useResizeObserver from use-resize-observer/dist/bundle.esm.js; import { useResizeObserver } from use-resize-observer;8. 测量尺寸为0时现在报告为0而不是undefined以前真正的零测量值折叠的或display: none相邻的元素显示为undefined这与尚未测量无法区分。现在它被报告为0而undefined仅表示尚未测量。如果你使用默认值来掩盖这个问题——const { width 0 } ...——真正的0现在不再触发默认值。这通常是你想要的但如果你在width undefined上分支就值得一看。9. 全局ResizeObserverEntry增强已移除v9提供了一个declare global它将devicePixelContentBoxSize添加到全局ResizeObserverEntry类型中这会泄露到每个消费者的类型中。现在这已被移除。如果你的代码依赖于该环境声明你现在需要一个足够新的TypeScriptlib来定义它ES2022时代的DOM libs可以或者自己声明它。值得注意onResize负载增加了entryonResize回调现在接收原始ResizeObserverEntry以及测量的大小。这是附加的因此解构所需内容的处理程序保持不变onResize: ({ width, height }) {} // 不受影响只有当你将整个负载传递到某个地方时才重要因为它现在携带了额外的属性将其存储在状态中。onResize: setSize现在将条目放入你的状态中只要该状态存在它就会保持活跃状态——通过entry.target观察到的元素也是如此。相反选择这些值-onResize: setSize onResize: ({ width, height }) setSize({ width, height })精确比较。对负载的深度相等性检查执行expect(size).toEqual({ width, height })的测试或比较负载的备忘录不再匹配。比较各个值或使用部分匹配。迁移步骤总结将默认导入改为命名导入移除对use-resize-observer/polyfilled的引用如果需要手动添加ResizeObserver polyfill更新React版本至18.2或更高检查并更新任何深度导入审查代码中处理undefined尺寸的部分检查onResize回调的使用方式工具链更新v10不仅带来了API变化还对工具链进行了全面现代化构建rollup babel → tsdown (ESM CJS 类型声明)测试jest karma → Vitest在真实浏览器中使用Playwright以及在真实桌面和移动设备上的WebdriverIO / BrowserStack套件lint / 格式化eslint prettier → oxlint oxfmt包管理器yarn → pnpm在Node 24上使用OIDC可信发布的CI这些变化虽然不直接影响你的代码但它们提高了库的质量和可维护性确保未来的更新更加顺畅。总结use-resize-observer v10带来了一些重要的变化但迁移过程相对简单主要涉及导入方式的改变和一些小的API调整。通过遵循本文概述的步骤你应该能够顺利地将项目从v9迁移到v10并享受新版本带来的改进和优化。如果你在迁移过程中遇到任何问题可以查阅项目的MIGRATION.md文件获取更详细的信息或查看测试目录中的示例代码如useResizeObserver.test.tsx。升级到v10不仅能让你使用最新的功能还能确保你的项目与现代React生态系统保持同步为未来的发展做好准备。【免费下载链接】use-resize-observerA React hook that allows you to use a ResizeObserver to measure an elements size.项目地址: https://gitcode.com/gh_mirrors/us/use-resize-observer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考