update react to 19 #222
update react to 19 #222
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning Rate limit exceeded@li-jia-nan has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 19 minutes and 33 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (4)
""" Walkthrough本次更改主要涉及依赖项的升级与类型调整，包括将 React 及其相关类型提升至 19.x 版本，优化 TypeScript 类型声明，以及对部分组件进行函数式重构和类型优化。同时， Changes
Sequence Diagram(s)sequenceDiagram
participant Parent
participant ResizeObserver
participant SingleObserver
participant Child
Parent->>ResizeObserver: 传递 children 和 ref
ResizeObserver->>SingleObserver: 为每个 child 创建 SingleObserver
SingleObserver->>Child: 克隆 child，附加 ref
Note right of SingleObserver: 监听尺寸变化
Possibly related PRs
Suggested reviewers
Poem
""" ✨ Finishing Touches
🧪 Generate Unit Tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
package.json (1)
61-61: 💡 Verification agent🧩 Analysis chain
enzyme-adapter-react-16 可能与 React 19 不兼容
当前仍然保留了
enzyme-adapter-react-16依赖，这个适配器可能无法与 React 19 正常工作。建议升级到兼容 React 19 的适配器或考虑迁移到 React Testing Library。
🏁 Script executed:
#!/bin/bash # 检查是否有适用于 React 19 的 enzyme adapter npm view enzyme-adapter-react versions | grep -E "19|20" npm view @wojtekmaj/enzyme-adapter-react versions | grep -E "19|20" # 检查是否有与 React 19 相关的测试文件使用了 enzyme rg -l "enzyme" --type js --type ts --type jsx --type tsx | xargs rg -l "React" | head -n 5Length of output: 1194
检测到无可用于 React 19 的 Enzyme 适配器
已确认 package.json 中仍然保留
"enzyme-adapter-react-16"（仅支持 React 16），且在 npm 注册表中不存在适配 React 19 的官方或社区版本。
建议将测试框架迁移至与 React 19 兼容的方案，例如 React Testing Library，或评估其他支持新版 React 的测试工具。
- 关注文件：
package.json（第 61 行）- 移除或替换
enzyme-adapter-react-16依赖- 更新测试代码，改用 React Testing Library 或其他兼容工具
🧹 Nitpick comments (3)
package.json (1)
56-56: cheerio 依赖版本固定cheerio 依赖使用了固定版本号
1.0.0-rc.12而不是使用^前缀。建议使用^1.0.0-rc.12以允许兼容的次要版本更新，除非有特定原因需要锁定确切版本。- "cheerio": "1.0.0-rc.12", + "cheerio": "^1.0.0-rc.12",src/SingleObserver/index.tsx (2)
8-10: 空接口设计可以优化SingleObserverProps 接口现在是空的，只有一个注释
//。建议要么完全删除这个接口（如果不需要），要么添加适当的注释说明其存在的原因，或者添加未来可能扩展的属性占位符。-export interface SingleObserverProps extends ResizeObserverProps { - // -} +export interface SingleObserverProps extends ResizeObserverProps { + // 保留此接口用于未来可能扩展的属性 +}
36-38: 考虑使用更精确的类型替代any类型断言多处使用了
any类型断言，这降低了类型安全性。虽然在某些情况下这可能是必要的，但建议尝试使用更精确的类型定义。- const canRef = - !isRenderProps && React.isValidElement<any>(mergedChildren) && supportRef(mergedChildren); - - const originRef = canRef ? getNodeRef(mergedChildren as any) : null; + // 为 mergedChildren 定义更精确的类型 + const canRef = + !isRenderProps && + React.isValidElement<React.ReactElement>(mergedChildren) && + supportRef(mergedChildren); + + const originRef = canRef ? getNodeRef(mergedChildren as React.ReactElement) : null;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.gitignore(1 hunks)package.json(2 hunks)src/Collection.tsx(2 hunks)src/SingleObserver/index.tsx(4 hunks)src/index.tsx(2 hunks)
🔇 Additional comments (12)
.gitignore (1)
29-29: 添加 pnpm 锁文件到 .gitignore 中与现有的 yarn.lock 和 package-lock.json 忽略模式保持一致，这是一个合理的添加，有助于避免不同包管理器锁文件的冲突。
src/Collection.tsx (1)
22-25: 组件重构为使用 React.FC 类型的函数组件将 Collection 从普通函数声明重构为使用 React.FC 类型的箭头函数常量，并利用 React.PropsWithChildren 来处理子组件属性。此更改符合现代 React 类型模式，有助于提高类型安全性。
不过需要注意的是，虽然这种模式在 React 18 中很常见，但在 React 19 中，React 团队对 React.FC 的使用有所降低，更倾向于使用带有显式属性类型的函数声明。然而，当前实现仍然有效且类型安全。
Also applies to: 56-56
package.json (2)
70-76: React 更新至 19.1.0 版本成功将 React 及相关依赖升级到了 19.x 版本，并适当地更新了对应的类型定义与 peerDependencies 要求。
49-54: 已更新或添加的开发依赖已添加
@rc-component/np、@types/node开发依赖，并更新了 React 相关类型定义到 19.x 版本，与 React 更新保持一致。这些更改有助于改进开发工作流和类型支持。src/SingleObserver/index.tsx (2)
12-15: SingleObserver 组件重构为使用 React.ForwardRefRenderFunction将组件从函数声明重构为使用 React.ForwardRefRenderFunction 的箭头函数，明确了组件类型和 ref 转发机制，使类型定义更加清晰。
110-110: 简化的渲染逻辑将多行的渲染逻辑简化为单行条件表达式，代码更简洁。不过在更复杂的组件中，确保这种简化不会影响代码可读性。
src/index.tsx (6)
27-27: 优化了 children 属性的类型定义将 children 的类型从
React.ReactElement更新为React.ReactNode | ((ref: React.RefObject<any>) => React.ReactElement<any>)，提高了组件的灵活性和类型安全性，更好地支持了不同类型的子元素。
33-36: 使用 ForwardRefRenderFunction 类型提升了类型安全性将组件重构为使用
React.ForwardRefRenderFunction<HTMLElement, ResizeObserverProps>类型，明确了组件会转发 HTMLElement 类型的 ref，符合 React 19 的最佳实践。这种类型声明方式更加明确和类型安全。
38-38: 改进了 children 处理逻辑当 children 是函数时，将其包装为数组；否则使用 toArray 函数进行转换。这种处理方式更加统一和健壮，能够适应各种不同的使用场景。
51-51: 明确了 map 方法的返回类型为 map 方法添加了明确的返回类型注解
React.ReactElement<any>，提高了代码的类型安全性和可读性。
58-59: 更新了组件的语法结构将组件的结束部分更新为箭头函数的语法结构，保持了代码风格的一致性，符合现代 React 组件的编写方式。
1-73:✅ Verification successful
验证升级到 React 19 后的兼容性
代码已经成功适配了 React 19，但建议验证所有依赖包是否与 React 19 完全兼容，特别是
@rc-component/util包。
🏁 Script executed:
#!/bin/bash # 检查项目依赖与 React 19 的兼容性 # 检查 package.json 中的 React 版本 echo "检查 React 版本:" cat package.json | grep -A 5 '"dependencies"' | grep react # 检查 @rc-component/util 包的最新版本及其支持的 React 版本 echo -e "\n检查 @rc-component/util 包信息:" npm view @rc-component/util version peerDependenciesLength of output: 303
无需额外兼容性验证 @rc-component/util
经检查，@rc-component/[email protected] 的 peerDependencies 已声明
react >=18.0.0，完全兼容 React 19，无需进一步调整。
Summary by CodeRabbit
.gitignore文件，新增对pnpm-lock.yaml的忽略。