Skip to content

Conversation

@EmilyyyLiu
Copy link
Contributor

@EmilyyyLiu EmilyyyLiu commented Sep 10, 2025

关联issue:ant-design/ant-design#54854
替换 useMergedState 为 useControlledState

Summary by CodeRabbit

  • 重构
    • 优化输入组件的受控/非受控状态管理,提升与外部值同步的一致性与稳定性,交互更顺滑,降低边缘场景的不同步概率。
  • 杂务
    • 升级第三方依赖至最新小版本,带来轻量的可靠性与兼容性改进,无需用户额外操作。

@coderabbitai
Copy link

coderabbitai bot commented Sep 10, 2025

Walkthrough

此次变更包含:在 package.json 中将依赖 @rc-component/util 从 ^1.2.0 升至 ^1.3.0;在 src/Input.tsx 中将受控/非受控值管理从 useMergedState 切换为 useControlledState,并相应调整初始化参数与导入路径。

Changes

Cohort / File(s) Summary
依赖更新
package.json
将依赖 @rc-component/util^1.2.0 升级为 ^1.3.0
Input 受控状态钩子替换
src/Input.tsx
useMergedState 替换为 useControlledState;导入路径由 .../useMergedState 改为 .../useControlledState;初始化由 useMergedState(props.defaultValue, { value: props.value }) 改为 useControlledState(props.defaultValue, props.value)

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant P as Props
  participant I as Input(Component)
  participant H as useControlledState

  Note over I,H: 初始化
  P->>I: defaultValue, value
  I->>H: useControlledState(defaultValue, value)
  H-->>I: [value, setValue]

  Note over I,U: 交互与受控切换
  U->>I: 输入变更(onChange)
  alt 受控(value !== undefined)
    I->>P: 触发 onChange(新值)
    I-->>U: 显示来自 props.value
  else 非受控(value === undefined)
    I->>H: setValue(新值)
    I-->>U: 显示内部状态值
  end
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks (3 passed)

✅ Passed checks (3 passed)
Check name Status Explanation
Title Check ✅ Passed 这个标题精准指出了本次变更的核心:升级工具依赖并替换 useMergedState,语义清晰且与改动内容高度一致,因此能够让团队成员一眼了解此次重构的要点。
Description Check ✅ Passed 当前描述明确关联了相关 issue 并说明了替换 useMergedState 的目的,虽简短但与改动内容直接相关,可以识别本次变更核心。
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.

Poem

代码田里风轻拂,依赖升级跃一步。
输入小芽换新土,受控之手更清楚。
兔子挥耳敲木鼓,值来值往不迷途。
啪嗒啪嗒——提交驻!

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

  • Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
  • Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.


📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a9651cf and c491e1c.

📒 Files selected for processing (2)
  • package.json (1 hunks)
  • src/Input.tsx (2 hunks)
🔇 Additional comments (3)
package.json (1)

48-48: 请补充运行脚本,确认旧用法已移除、新钩子已引入且锁文件已同步

#!/bin/bash
set -euo pipefail

echo "1. 确认 package.json 中 @rc-component/util 版本:"
jq -r '.dependencies["@rc-component/util"]' package.json

echo -e "\n2. 搜索 useMergedState 旧用法:"
rg -nP 'useMergedState' --glob '*.{ts,tsx,js,jsx}' || echo "→ 未发现 useMergedState 相关引用"

echo -e "\n3. 搜索 useControlledState 新用法:"
rg -nP 'useControlledState' --glob '*.{ts,tsx,js,jsx}' || echo "→ 未发现 useControlledState 相关引用"

echo -e "\n4. 检查锁文件变更:"
# 若使用 npm:
npm install --package-lock-only
# 若使用 yarn:
# yarn install --pure-lockfile
git diff --exit-code package-lock.json yarn.lock && echo "→ 锁文件已同步,无未提交变更" || echo "→ 锁文件有变更,请提交"
src/Input.tsx (2)

2-2: 导入路径正确并与新依赖版本对齐


58-58: 将 useMergedState 切换为 useControlledState 的签名匹配且语义等价(在本组件使用场景下)

  • 这里未使用 useMergedStateonChange/postState 特性,新签名 useControlledState(defaultValue, value) 足以覆盖当前需求。其类型为 [T, Updater<T>],可接受值或 updater 函数。(app.unpkg.com)

为防回归,建议补一组最小用例(或本地跑一下现有用例)覆盖:

  • 受控模式:value 外部变更应即时反映到输入框;
  • 非受控模式:仅传 defaultValue,内部 setValue('')handleReset 生效;
  • 受控↔非受控切换(不建议在应用层做,但组件层需确保无 React 警告)。
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary of Changes

Hello @EmilyyyLiu, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refactors the Input component by updating a core utility dependency and migrating its internal state management from useMergedState to useControlledState. This change aligns the component with a more explicit pattern for handling controlled and uncontrolled states, enhancing clarity and maintainability.

Highlights

  • Dependency Upgrade: The @rc-component/util package has been upgraded from version ^1.2.0 to ^1.3.0.
  • State Hook Replacement: The useMergedState hook in src/Input.tsx has been replaced with useControlledState for managing the component's value.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in issue comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

你好,感谢你的贡献。本次 PR 将 @rc-component/util 依赖从 ^1.2.0 升级到了 ^1.3.0,并使用新的 useControlledState hook 替换了 useMergedState 来管理输入框的值。这是一个很好的重构,使得状态管理逻辑更加清晰和简洁。代码改动正确,符合预期,提升了代码的可读性和可维护性。做得很好!

@codecov
Copy link

codecov bot commented Sep 10, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.70%. Comparing base (a9651cf) to head (c491e1c).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #136   +/-   ##
=======================================
  Coverage   97.70%   97.70%           
=======================================
  Files           4        4           
  Lines         218      218           
  Branches       82       82           
=======================================
  Hits          213      213           
  Misses          5        5           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@zombieJ zombieJ merged commit 28dcdb9 into react-component:master Sep 10, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants