refactor: use rc-util getNodeRef #238
Conversation
Walkthrough此次更改涉及 Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #238 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 5 5
Lines 107 107
Branches 31 31
=========================================
Hits 107 107 ☔ View full report in Codecov by Sentry. |
![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 and nitpick comments (2)
src/Overlay.tsx (1)
28-30: 优化条件判断的可读性当前的引用传递逻辑结构清晰，但可以考虑提取判断条件到一个描述性变量中以提高可读性。
+const shouldPassRef = supportRef(overlayNode); {React.cloneElement(overlayNode, { - ref: supportRef(overlayNode) ? composedRef : undefined, + ref: shouldPassRef ? composedRef : undefined, })}src/Dropdown.tsx (1)
141-142: 优化引用处理逻辑使用 getNodeRef 简化了子组件的引用获取过程，但建议：
- 考虑将引用处理逻辑提取到独立的 hook 中
- 添加相关的单元测试用例
+const useChildRef = (child: React.ReactElement) => { + const innerRef = React.useRef(null); + return { + ref: innerRef, + composedRef: supportRef(child) + ? composeRef(innerRef, getNodeRef(child)) + : undefined, + }; +};
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
package.json(1 hunks)src/Dropdown.tsx(2 hunks)src/Overlay.tsx(2 hunks)
🔇 Additional comments (4)
src/Overlay.tsx (2)
1-1: 引入 getNodeRef 优化引用处理
从 rc-util/lib/ref 引入 getNodeRef 是一个良好的改进，它提供了更简洁和标准化的方式来处理节点引用。
23-23: 验证引用组合的正确性
使用 getNodeRef 获取节点引用后与外部 ref 组合的方式是正确的，但建议验证在所有场景下的行为一致性。
✅ Verification successful
ref 组合模式使用正确且一致
通过代码库分析，发现 composeRef 和 getNodeRef 的组合模式在 Overlay 和 Dropdown 组件中都有使用，且使用方式保持一致。这表明当前实现遵循了项目中既定的最佳实践。
src/Overlay.tsx:composeRef(ref, getNodeRef(overlayNode))src/Dropdown.tsx:composeRef(childRef, getNodeRef(children))
两处实现都是从 rc-util/lib/ref 导入相关方法，并采用相同的组合模式，证实了当前实现的正确性。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他组件中是否有类似的 ref 组合模式
rg "composeRef.*getNodeRef" --type tsx
Length of output: 68
Script:
#!/bin/bash
# 搜索 composeRef 和 getNodeRef 的使用模式
rg "composeRef" -A 2
Length of output: 704
Script:
#!/bin/bash
# 查找 getNodeRef 的使用
rg "getNodeRef" -A 2
Length of output: 704
Script:
#!/bin/bash
# 查找所有可能的 ref 组合相关文件
fd -e ts -e tsx -e jsx | xargs rg "ref.*=.*compose"
Length of output: 53
Script:
#!/bin/bash
# 检查 composeRef 的实现
ast-grep --pattern 'function composeRef($_) { $$$ }'
Length of output: 54
package.json (1)
50-50: 验证 rc-util 版本升级的兼容性
rc-util 版本从 ^5.17.0 升级到 ^5.44.1 是一个较大的版本跨度，建议：
- 检查是否存在破坏性更改
- 验证新版本中 ref 相关 API 的稳定性
✅ Verification successful
Let me gather more information about the changes between these versions.
根据代码分析和版本变更记录，我可以生成最终响应了：
rc-util 版本升级安全可行
代码库中主要使用了 rc-util 的以下功能：
- ref 相关 API（composeRef, getNodeRef, supportRef）
- KeyCode 和 raf 工具函数
- 测试工具函数
从 5.17.0 到 5.44.1 的变更主要是性能优化和类型改进，没有发现破坏性更改。特别是对 ref 相关 API 的改动都是向后兼容的增强：
- getNodeRef 新增功能 (#545)
- supportRef 函数优化 (#477)
- useComposeRef 逻辑改进 (#458)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 rc-util 的变更日志
gh api repos/react-component/util/releases | jq -r '.[].body' | grep -A 5 "5.44.1"
Length of output: 428
Script:
#!/bin/bash
# 检查 rc-util 在代码库中的使用情况
rg "rc-util" -A 2
# 检查更早的版本变更记录
gh api repos/react-component/util/releases | jq -r '.[].body' | grep -B 2 -A 3 "5\.[1-4]"
Length of output: 6365
src/Dropdown.tsx (1)
10-10: 统一引用处理方式
引入 getNodeRef 与 Overlay 组件保持一致，有助于维护代码的一致性。
Summary by CodeRabbit
新特性
文档
rc-util从^5.17.0升级到^5.44.1。样式
Overlay组件的属性定义格式，提高了可读性。