perf(col): 使用hooks优化 #3361
perf(col): 使用hooks优化 #3361
Conversation
Walkthrough在 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant P as Props(offset, span, gutter, isFirst, isLast)
participant C as Col Component
participant M as useMemo(classs)
participant S as useMemo(getStyle)
participant E as useEffect(sync state)
participant R as Render
P->>M: 依赖(offset, span, gutter)
P->>S: 依赖(isFirst, isLast, gutter)
M-->>C: 返回记忆化 classs
S-->>C: 返回记忆化 getStyle
C->>E: 依赖(classs, getStyle)
E->>C: setState(colName, colStyle)
C->>R: 使用 colName + colStyle 渲染
Note over E,R: 当依赖变更时，状态更新并触发重渲染
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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. Comment |
github-actions
bot
added
3.x
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3361 +/- ##
==========================================
Coverage 88.15% 88.15%
==========================================
Files 291 291
Lines 19212 19212
Branches 2988 2988
==========================================
Hits 16937 16937
Misses 2269 2269
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![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
🧹 Nitpick comments (2)
src/packages/col/col.tsx (1)
54-57: 考虑性能优化设计的必要性当前设计既使用了 useMemo 进行记忆化，又通过 useEffect 更新本地状态。这种双重机制在依赖项频繁变化时可能不会带来预期的性能提升，反而增加了代码复杂度。
建议评估是否直接在渲染中使用 useMemo 的结果：
- const [colName, setColName] = useState(classs) - const [colStyle, setColStyle] = useState(getStyle) - - useEffect(() => { - setColName(classs) - setColStyle(getStyle) - }, [classs, getStyle]) - return ( <div - className={classNames(colName, className)} - style={{ ...style, ...colStyle }} + className={classNames(classs, className)} + style={{ ...style, ...getStyle }}src/packages/col/col.taro.tsx (1)
54-57: 考虑简化性能优化设计与 col.tsx 存在相同的设计问题：既使用了 useMemo 又通过 useEffect 同步状态，这种双重机制可能带来不必要的复杂度。
建议考虑直接使用 useMemo 的结果，简化代码逻辑。如果确实需要本地状态（例如为了某些特定的 Taro 优化需求），请在注释中说明原因。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/col/col.taro.tsx(3 hunks)src/packages/col/col.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: irisSong
PR: jdf2e/nutui-react#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 的返回函数中清除。
📚 Learning: 2025-05-02T01:45:09.576Z
Learnt from: irisSong
PR: jdf2e/nutui-react#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/col/col.taro.tsx
🧬 Code graph analysis (2)
src/packages/col/col.tsx (1)
src/hooks/use-memo.ts (1)
useMemo(8-24)
src/packages/col/col.taro.tsx (1)
src/hooks/use-memo.ts (1)
useMemo(8-24)
🔇 Additional comments (8)
src/packages/col/col.tsx (4)
7-7: 导入 useMemo 钩子用于性能优化正确导入了 useMemo 钩子以支持计算结果的记忆化。
33-38: 使用 useMemo 优化类名计算将类名计算逻辑包装在 useMemo 中，依赖项设置为 [offset, span, gutter]，可以避免在这些属性未变化时重新计算类名字符串。
40-49: 使用 useMemo 优化样式计算将样式计算逻辑包装在 useMemo 中，依赖项设置为 [isFirst, isLast, gutter]，可以避免在这些属性未变化时重新计算样式对象。
51-52: 状态初始化逻辑合理使用 useState 存储计算结果并从 useMemo 的返回值进行初始化，确保初次渲染时使用正确的值。
src/packages/col/col.taro.tsx (4)
7-7: 导入 useMemo 钩子用于性能优化正确导入了 useMemo 钩子以支持计算结果的记忆化。
33-38: 使用 useMemo 优化类名计算将类名计算逻辑包装在 useMemo 中，依赖项设置为 [offset, span, gutter]，可以避免在这些属性未变化时重新计算类名字符串。与 col.tsx 保持了一致的优化策略。
40-49: 使用 useMemo 优化样式计算将样式计算逻辑包装在 useMemo 中，依赖项设置为 [isFirst, isLast, gutter]。注意这里使用了
pxTransform进行单位转换，这是 Taro 环境的正确做法。
51-52: 状态初始化逻辑合理使用 useState 存储计算结果并从 useMemo 的返回值进行初始化，与 col.tsx 保持一致的设计。
|
考虑引入 react compiler 吗？ 这里的手动优化可以使用 react compiler 直接替代 |
3 participants
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit