refactor(countup): 优化数字滚动动画实现逻辑

[lyysm]

🤔 这个变动的性质是？

• 新特性提交
• 日常 bug 修复
• 站点、文档改进
• 演示代码改进
• 组件样式/交互改进
• TypeScript 定义更新
• 包体积优化
• 性能优化
• 功能增强
• 国际化改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他改动（是关于什么的改动？）

🔗 相关 Issue

#3397

💡 需求背景和解决方案

AnimatingNumbers 数字动画组件显示值与 value 不一致问题

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• fork仓库代码是否为最新避免文件冲突
• Files changed 没有 package.json lock 等无关文件

Summary by CodeRabbit

• 性能优化
  • 改进了数字动画计算方式，提升了渲染效率。

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

走查总结

本PR将计数动画组件中基于DOM的转换计算替换为数组驱动的方法，移除了createSelectorQuery和DOM遍历逻辑，并扩展了useCallback依赖项以确保duration变化时转换重新计算。

变更内容

内聚体 / 文件	变更摘要
转换计算优化 src/packages/animatingnumbers/countup.taro.tsx	将DOM查询驱动的转换计算替换为直接的数组驱动方法；从numberArr遍历计算newTransformArr，移除createSelectorQuery调用；扩展useCallback依赖项，新增duration参数以支持duration变化时的重新计算

预估代码审查工作量

🎯 3 (中等) | ⏱️ ~20 分钟

• 需验证数组驱动的转换计算逻辑是否与原DOM查询方式等效
• 应确认useCallback依赖项扩展（新增duration）的必要性和完整性
• 需检查边界情况处理，特别是numberArr为空或duration变化时的行为

可能相关的PR

• fix(AnimatingNumbers): 多端适配 #2700: 同样修改了animatingnumbers中的CountUp实现（src/packages/animatingnumbers/countup.taro.tsx），包含转换计算和numberArr处理逻辑的相关改动

建议审查人

• oasis-cloud
• Alex-huxiyang

诗歌

🐰 数组舞动替DOM查询，
转换重生于纯数值流，
duration亲吻依赖链，
优化之光照亮计数路，
性能起舞，代码更悦！✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	标题准确概括了核心变更：优化数字滚动动画的实现逻辑，符合代码变更从DOM查询方式改为数组驱动方式的重构内容。
Description check	✅ Passed	描述完整填写了模板中的主要部分：选择了变动性质、关联了Issue、说明了需求背景、完成了自查清单的所有项目。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/packages/animatingnumbers/countup.taro.tsx (2)

56-74: 基于数字的滚动计算逻辑整体 OK，但位移比例建议抽象为可推导常量

这段重写后的逻辑直接基于 numberArr 的字符值计算 transform，避免了 DOM 查询和布局依赖，能稳定保证显示值与 value 保持一致，方向是很好的。

有两个小建议可考虑：

1. 位移比例的魔法数 5%
   当前写死为 numValue * 5%，这个 5% 显然与 [...numbers, ...numbers] 的长度（当前是 20 个元素）耦合。如果未来调整数字重复次数或样式高度，这里容易被遗忘。可以考虑用长度推导，避免魔法数，例如类似：

   const itemHeightPercent = 100 / (numbers.length * 2) // 当前为 5
   // ...
   transform: `translate(0, -${numValue * itemHeightPercent}%)`,

   这样即使后面调整数字数组长度，也不需要手动同步 5%。

2. 构造数组方式的小优化（非必须）
   现在是 const newTransformArr: CSSProperties[] = [] 然后 forEach 逐个赋值。由于 idx 与 numberArr 一一对应，也可以用 map 直接返回新数组，更直观一些（功能等价，不是必须改）：

   const newTransformArr = numberArr.map((item) => {
     const numValue = Number(item)
     return Number.isNaN(numValue)
       ? undefined
       : {
           transitionDuration: `${duration}s`,
           transform: `translate(0, -${numValue * itemHeightPercent}%)`,
         }
   })

整体上这块逻辑功能是正确的，这些只是降低未来维护成本的优化点。

---

76-92: useEffect 中 isLoaded 标志位的实际效果和预期可能不一致，建议确认并视情况简化逻辑

当前 effect 依赖为 [numberArr, delay, setNumberTransform]，并且在清理函数中有：

return () => {
  clearTimeout(timerRef.current)
  isLoaded.current = false
}

这意味着：

• 每次 numberArr（或 delay / setNumberTransform）变化时，旧 effect 的 cleanup 会先执行，把 isLoaded.current 重置为 false。
• 随后新 effect 运行时，!isLoaded.current 恒为 true，因此始终走 setTimeout 分支；else 分支里的 setNumberTransform() 实际上几乎不会被命中。

如果你的设计是「每次 value / numberArr 变化都需要经过 delay 再开始滚动」，那么现在的行为是正确的，但可以考虑直接去掉 isLoaded 和 else 分支，只保留统一的定时逻辑，简化状态：

useEffect(() => {
  if (numberArr.length) {
    // @ts-ignore
    timerRef.current = setTimeout(() => {
      setNumberTransform()
    }, delay)
  }
  return () => {
    clearTimeout(timerRef.current)
  }
}, [numberArr, delay, setNumberTransform])

如果原来的意图是「首屏延迟，后续变更立即滚动」，则需要重新设计 isLoaded 的使用位置（例如不在 cleanup 中重置，或拆成两个 effect）。

另外，这里已经在 cleanup 中统一 clearTimeout，符合我们之前关于定时器必须清理以避免内存泄漏的经验，这是好的实践。Based on learnings, …

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e9a80b8 and bc3fc75.

📒 Files selected for processing (1)

• src/packages/animatingnumbers/countup.taro.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: oasis-cloud
Repo: jdf2e/nutui-react PR: 2700
File: src/packages/animatingnumbers/animatingnumbers.harmony.css:25-32
Timestamp: 2024-11-06T05:56:06.800Z
Learning: 在优化 NutUI React 动画性能时，添加 `will-change` 属性可能会对布局产生影响，需要谨慎使用。

📚 Learning: 2025-05-02T01:45:09.576Z

Learnt from: irisSong
Repo: jdf2e/nutui-react PR: 3209
File: src/packages/searchbar/searchbar.taro.tsx:111-124
Timestamp: 2025-05-02T01:45:09.576Z
Learning: 在 React/Taro 组件中使用 setTimeout 或 setInterval 时，应当在组件卸载时通过 useEffect 的清理函数清除定时器，以防止内存泄漏。可以使用 useState 存储定时器 ID，并在 useEffect 的返回函数中清除。

Applied to files:

• src/packages/animatingnumbers/countup.taro.tsx