fix(range): taro环境异步渲染useReady不会触发 #3297
Open
+70
−64
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
""" Walkthrough本次变更将组件的生命周期钩子从 Taro 的 Changes
Suggested reviewers
Poem
✨ Finishing Touches
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 (
|
github-actions
bot
added
action:review
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3297 +/- ##
=============================================
- Coverage 88.14% 88.13% -0.01%
=============================================
Files 290 290
Lines 19110 19110
Branches 2960 2959 -1
=============================================
- Hits 16844 16843 -1
- Misses 2261 2262 +1
Partials 5 5 ☔ 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 (1)
src/packages/range/range.taro.tsx (1)
290-300: 建议优化 useLayoutEffect 的依赖数组从
useReady切换到useLayoutEffect可以解决 Taro 异步渲染环境中的问题，但当前实现可能存在性能问题。没有依赖数组的useLayoutEffect会在每次渲染后都执行，这可能导致不必要的矩形计算。建议添加依赖数组以优化性能：
- useLayoutEffect(() => { + useLayoutEffect(() => { const getRootRect = async () => { if (root.current) { const rect = await getRectInMultiPlatform(root.current) rootRect.current = rect } } nextTick(() => { getRootRect() }) - }) + }, [])如果根元素的尺寸可能因为 props 变化而改变，可以考虑添加相关的依赖项。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/range/range.taro.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2700
File: src/packages/animatingnumbers/animatingnumbers.harmony.css:25-32
Timestamp: 2024-11-06T05:56:06.800Z
Learning: 在优化 NutUI React 动画性能时，添加 `will-change` 属性可能会对布局产生影响，需要谨慎使用。
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 的返回函数中清除。
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2540
File: src/packages/trendarrow/trendarrow.taro.tsx:29-30
Timestamp: 2024-11-06T02:16:07.069Z
Learning: 在`TrendArrow`组件（`src/packages/trendarrow/trendarrow.taro.tsx`）中，CSS变量在鸿蒙系统（Harmony OS）中可能未被完全支持，导致兼容性问题。因此，使用硬编码的十六进制颜色值可以确保在鸿蒙系统上的正确显示。
src/packages/range/range.taro.tsx (4)
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 的返回函数中清除。
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2700
File: src/packages/animatingnumbers/animatingnumbers.harmony.css:25-32
Timestamp: 2024-11-06T05:56:06.800Z
Learning: 在优化 NutUI React 动画性能时，添加 `will-change` 属性可能会对布局产生影响，需要谨慎使用。
Learnt from: xiaoyatong
PR: jdf2e/nutui-react#2990
File: src/packages/pickerview/__test__/pickerview.spec.tsx:0-0
Timestamp: 2025-02-25T02:21:32.906Z
Learning: In React component tests, avoid using setTimeout with fixed delays. Instead, use act() to wrap async state updates and waitFor() for assertions, which makes tests more stable and reliable.
Learnt from: Alex-huxiyang
PR: jdf2e/nutui-react#2416
File: src/packages/uploader/uploader.taro.tsx:230-230
Timestamp: 2024-07-05T02:58:57.992Z
Learning: When changes are made to the `fileList` state in the `src/packages/uploader/uploader.taro.tsx` file, ensure to generate unit tests to cover these changes.
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (1)
src/packages/range/range.taro.tsx (1)
5-5: 导入更改看起来正确添加
useLayoutEffect导入以支持新的生命周期钩子使用，这是合理的变更。
|
那就一起改了 验证一下吧~~~ |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/avatarcropper/avatarcropper.taro.tsx (1)
141-153: 使用函数式更新以避免依赖项警告虽然
canvasAll.canvasId在组件生命周期中不会改变，但为了遵循 React 最佳实践并消除 ESLint 警告，建议使用函数式更新：- setCanvasAll({ ...canvasAll, cropperCanvas: canvas }) + setCanvasAll((prevCanvasAll) => ({ ...prevCanvasAll, cropperCanvas: canvas }))
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/packages/avatarcropper/avatarcropper.taro.tsx(4 hunks)src/packages/lottie/lottiemp.taro.tsx(3 hunks)src/packages/range/range.taro.tsx(2 hunks)src/packages/rate/rate.taro.tsx(3 hunks)src/packages/swipe/swipe.taro.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/range/range.taro.tsx
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2700
File: src/packages/animatingnumbers/animatingnumbers.harmony.css:25-32
Timestamp: 2024-11-06T05:56:06.800Z
Learning: 在优化 NutUI React 动画性能时，添加 `will-change` 属性可能会对布局产生影响，需要谨慎使用。
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 的返回函数中清除。
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2540
File: src/packages/trendarrow/trendarrow.taro.tsx:29-30
Timestamp: 2024-11-06T02:16:07.069Z
Learning: 在`TrendArrow`组件（`src/packages/trendarrow/trendarrow.taro.tsx`）中，CSS变量在鸿蒙系统（Harmony OS）中可能未被完全支持，导致兼容性问题。因此，使用硬编码的十六进制颜色值可以确保在鸿蒙系统上的正确显示。
Learnt from: xiaoyatong
PR: jdf2e/nutui-react#2990
File: src/packages/pickerview/__test__/pickerview.spec.tsx:0-0
Timestamp: 2025-02-25T02:21:32.906Z
Learning: In React component tests, avoid using setTimeout with fixed delays. Instead, use act() to wrap async state updates and waitFor() for assertions, which makes tests more stable and reliable.
src/packages/rate/rate.taro.tsx (4)
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 的返回函数中清除。
Learnt from: xiaoyatong
PR: jdf2e/nutui-react#2990
File: src/packages/pickerview/__test__/pickerview.spec.tsx:0-0
Timestamp: 2025-02-25T02:21:32.906Z
Learning: In React component tests, avoid using setTimeout with fixed delays. Instead, use act() to wrap async state updates and waitFor() for assertions, which makes tests more stable and reliable.
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2700
File: src/packages/animatingnumbers/animatingnumbers.harmony.css:25-32
Timestamp: 2024-11-06T05:56:06.800Z
Learning: 在优化 NutUI React 动画性能时，添加 `will-change` 属性可能会对布局产生影响，需要谨慎使用。
Learnt from: Alex-huxiyang
PR: jdf2e/nutui-react#2416
File: src/packages/uploader/uploader.taro.tsx:230-230
Timestamp: 2024-07-05T02:58:57.992Z
Learning: When changes are made to the `fileList` state in the `src/packages/uploader/uploader.taro.tsx` file, ensure to generate unit tests to cover these changes.
src/packages/avatarcropper/avatarcropper.taro.tsx (4)
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 的返回函数中清除。
Learnt from: Alex-huxiyang
PR: jdf2e/nutui-react#2416
File: src/packages/uploader/uploader.taro.tsx:230-230
Timestamp: 2024-07-05T02:58:57.992Z
Learning: When changes are made to the `fileList` state in the `src/packages/uploader/uploader.taro.tsx` file, ensure to generate unit tests to cover these changes.
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2540
File: src/packages/trendarrow/trendarrow.taro.tsx:29-30
Timestamp: 2024-11-06T02:16:07.069Z
Learning: 在`TrendArrow`组件（`src/packages/trendarrow/trendarrow.taro.tsx`）中，CSS变量在鸿蒙系统（Harmony OS）中可能未被完全支持，导致兼容性问题。因此，使用硬编码的十六进制颜色值可以确保在鸿蒙系统上的正确显示。
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2700
File: src/packages/animatingnumbers/animatingnumbers.harmony.css:25-32
Timestamp: 2024-11-06T05:56:06.800Z
Learning: 在优化 NutUI React 动画性能时，添加 `will-change` 属性可能会对布局产生影响，需要谨慎使用。
src/packages/lottie/lottiemp.taro.tsx (3)
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2700
File: src/packages/animatingnumbers/animatingnumbers.harmony.css:25-32
Timestamp: 2024-11-06T05:56:06.800Z
Learning: 在优化 NutUI React 动画性能时，添加 `will-change` 属性可能会对布局产生影响，需要谨慎使用。
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 的返回函数中清除。
Learnt from: xiaoyatong
PR: jdf2e/nutui-react#2990
File: src/packages/pickerview/__test__/pickerview.spec.tsx:0-0
Timestamp: 2025-02-25T02:21:32.906Z
Learning: In React component tests, avoid using setTimeout with fixed delays. Instead, use act() to wrap async state updates and waitFor() for assertions, which makes tests more stable and reliable.
src/packages/swipe/swipe.taro.tsx (4)
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 的返回函数中清除。
Learnt from: xiaoyatong
PR: jdf2e/nutui-react#2990
File: src/packages/pickerview/__test__/pickerview.spec.tsx:0-0
Timestamp: 2025-02-25T02:21:32.906Z
Learning: In React component tests, avoid using setTimeout with fixed delays. Instead, use act() to wrap async state updates and waitFor() for assertions, which makes tests more stable and reliable.
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2700
File: src/packages/animatingnumbers/animatingnumbers.harmony.css:25-32
Timestamp: 2024-11-06T05:56:06.800Z
Learning: 在优化 NutUI React 动画性能时，添加 `will-change` 属性可能会对布局产生影响，需要谨慎使用。
Learnt from: Alex-huxiyang
PR: jdf2e/nutui-react#2416
File: src/packages/uploader/uploader.taro.tsx:230-230
Timestamp: 2024-07-05T02:58:57.992Z
Learning: When changes are made to the `fileList` state in the `src/packages/uploader/uploader.taro.tsx` file, ensure to generate unit tests to cover these changes.
🧬 Code Graph Analysis (1)
src/packages/swipe/swipe.taro.tsx (1)
src/hooks/use-ref-state.ts (1)
useRefState(6-16)
🪛 GitHub Check: lint
src/packages/avatarcropper/avatarcropper.taro.tsx
[warning] 153-153:
React Hook useLayoutEffect has a missing dependency: 'canvasAll'. Either include it or remove the dependency array. You can also do a functional update 'setCanvasAll(c => ...)' if you only need 'canvasAll' in the 'setCanvasAll' call
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (3)
src/packages/rate/rate.taro.tsx (1)
135-148: 实现正确且符合最佳实践
updateRects函数的记忆化处理得当，useLayoutEffect的使用确保了 DOM 更新后同步执行测量逻辑，解决了异步渲染的问题。src/packages/lottie/lottiemp.taro.tsx (1)
26-75: 生命周期钩子迁移正确从
useReady迁移到useLayoutEffect的实现正确，依赖数组完整，包含了所有可能影响动画初始化的属性。内联速度设置逻辑也是合理的重构。src/packages/swipe/swipe.taro.tsx (1)
61-105: 优秀的状态管理和生命周期处理使用
useRefState管理actionWidth是明智的选择，既能立即访问当前值，又能在值变化时触发重新渲染。setActionWidth的记忆化处理得当，useLayoutEffect确保了布局后同步执行测量逻辑。
|
taro下修改的示例，都试过一遍了。 |
|
#3299 |
oasis-cloud
approved these changes
Jul 8, 2025
|
@xiaoyatong @oasis-cloud |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
#3295 这个issue
useReady只会在组件挂载时触发一次，如果组件是异步渲染的就不会触发了。nutui库中还有几个组件使用了
useReady,建议使用useLayoutEffect和useEffect进行替代🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
Summary by CodeRabbit