fix(range): usememo #2638
fix(range): usememo #2638
Conversation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## next #2638 +/- ##
==========================================
+ Coverage 82.98% 83.85% +0.86%
==========================================
Files 219 218 -1
Lines 17909 17887 -22
Branches 2550 2608 +58
==========================================
+ Hits 14862 14999 +137
+ Misses 3042 2883 -159
Partials 5 5 ☔ View full report in Codecov by Sentry. |
Walkthrough此次更改涉及对 Changes
Possibly related PRs
Suggested reviewers
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (2)
src/packages/range/range.tsx (1)
182-182: 建议为新增代码添加单元测试静态分析工具指出，第 182、229、269、274、326 行的代码未被测试覆盖。为了提高代码的可靠性和稳定性，建议为这些逻辑添加相应的单元测试。
您是否需要我协助编写这些单元测试，或者为此创建一个 GitHub Issue 来跟踪这个任务？
Also applies to: 229-229, 269-269, 274-274, 326-326
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 182-182: src/packages/range/range.tsx#L182
Added line #L182 was not covered by testssrc/packages/range/range.taro.tsx (1)
323-328: 事件处理函数命名可能引起混淆在
renderRangeButton中，内部事件处理函数名称与组件props中的回调函数onTouchStart重名，可能导致混淆。建议将内部事件处理函数重命名，例如改为
handleTouchStart，以区别于props中的回调函数。- onTouchStart={(e: any) => { + handleTouchStart={(e: any) => { setButtonIndex(index) onTouchStart(e) }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
- src/packages/range/demos/h5/demo5.tsx (1 hunks)
- src/packages/range/range.scss (1 hunks)
- src/packages/range/range.taro.tsx (8 hunks)
- src/packages/range/range.tsx (7 hunks)
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/range/range.tsx
[warning] 182-182: src/packages/range/range.tsx#L182
Added line #L182 was not covered by tests
[warning] 229-229: src/packages/range/range.tsx#L229
Added line #L229 was not covered by tests
[warning] 269-269: src/packages/range/range.tsx#L269
Added line #L269 was not covered by tests
[warning] 274-274: src/packages/range/range.tsx#L274
Added line #L274 was not covered by tests
[warning] 326-326: src/packages/range/range.tsx#L326
Added line #L326 was not covered by tests
🔇 Additional comments (5)
src/packages/range/demos/h5/demo5.tsx (1)
11-12: 请考虑这些更改对用户体验的影响这些更改缩小了滑块的范围并调整了默认值：
- 默认值从0改为-8，这可能会影响用户的初始体验。
- 最大值从10降至-6，大幅缩小了可选范围。
建议：
- 在组件文档中清楚地说明这些更改的原因。
- 考虑添加注释解释为什么选择这些特定的值。
- 确保这些更改与组件的预期用途一致。
运行以下脚本以验证这些更改是否与其他演示或测试保持一致：
src/packages/range/range.scss (1)
37-38: LGTM! 增强了组件的响应性这些更改通过添加
max-width和max-height属性来限制范围条的尺寸，确保它不会超出其父容器的尺寸。这种修改提高了范围组件的响应性，使其在不同大小的容器中都能正确显示。src/packages/range/range.tsx (1)
7-7:useMemo的使用优化了性能引入
useMemo来计算scope，有效避免了每次渲染时的重复计算，提升了组件的性能表现。Also applies to: 147-149
src/packages/range/range.taro.tsx (2)
178-182:marksStyle计算可能不准确当
scope非常小或为0.1时，(mark - min) / scope的结果可能过大，导致标记位置渲染错误。请确认在
max === min的情况下，marksStyle函数能正确计算标记位置。
146-146:⚠️ Potential issue变量名拼写错误
setEaxctValue应为setExactValue，请修正拼写以避免潜在的问题。应用以下修改以纠正拼写错误：
- const [exactValue, setEaxctValue] = useState<RangeValue>( + const [exactValue, setExactValue] = useState<RangeValue>(Likely invalid or redundant comment.
| @@ -285,12 +266,12 @@ | |||
| const rect = getRect(root.current) | |||
| let delta = touch.deltaX.current | |||
| let total = rect.width | |||
| let diff = (delta / total) * scope() | |||
| let diff = (delta / total) * scope | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
提取重复的计算逻辑以提高代码可读性
在代码中，diff = (delta / total) * scope 的计算出现了多次。建议将此计算提取为一个函数或常量，以遵循 DRY（Don't Repeat Yourself）原则，提升代码的可维护性和清晰度。
可以考虑如下修改：
+ const calculateDiff = () => (delta / total) * scope
- let diff = (delta / total) * scope
+ let diff = calculateDiff()Also applies to: 274-274
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 269-269: src/packages/range/range.tsx#L269
Added line #L269 was not covered by tests
src/packages/range/range.tsx
Outdated
| const scope = useMemo(() => { | ||
| return max === min ? 0.1 : max - min | ||
| }, [max, min]) |
There was a problem hiding this comment.
建议更妥善地处理 max 等于 min 的情况
当前，当 max === min 时，scope 被设置为 0.1，这可能会导致计算结果不精确或产生意料之外的行为。建议在这种情况下，直接禁用滑块或给出提示，而不是使用固定的 0.1 作为范围。
您可以考虑如下修改：
const scope = useMemo(() => {
if (max === min) {
+ // 当 max 等于 min 时，处理逻辑
+ return 1 // 或根据需求返回适当的值
}
return max - min
}, [max, min])Committable suggestion was skipped due to low confidence.
| @@ -250,7 +226,7 @@ export const Range: FunctionComponent< | |||
| delta = (event.detail.y ? event.detail.y : event.clientY) - rect.top | |||
There was a problem hiding this comment.
状态更新函数拼写错误
在调用状态更新函数时，setEaxctValue 应为 setExactValue。
请应用以下修正：
- setEaxctValue(current)
+ setExactValue(current)以及
- setEaxctValue(newValue)
+ setExactValue(newValue)Also applies to: 272-272
src/packages/range/range.taro.tsx
Outdated
| return max === min ? 0.1 : max - min | ||
| }, [max, min]) |
There was a problem hiding this comment.
scope 的处理可能导致问题
当 max === min 时，将 scope 设置为 0.1 可能会引起计算上的不精确，导致滑块位置计算错误。
建议在 max === min 的情况下，直接将滑块设置在起始位置，或者提示用户 max 和 min 不应相等，以避免计算错误。
| let upperBound = max | ||
| if (range && Array.isArray(current)) { | ||
| lowerBound = current[0] | ||
| upperBound = current[1] | ||
| } else { | ||
| upperBound = current as number | ||
| } |
There was a problem hiding this comment.
单值模式下的逻辑可能有误
在 markClassName 函数中，当 range 为 false 时，只更新了 upperBound，lowerBound 仍保持为 min。这可能导致 isActive 判断不准确。
建议在单值模式下，将 lowerBound 和 upperBound 都设置为当前值，以确保标记的激活状态正确。
应用以下修改：
} else {
- upperBound = current as number
+ lowerBound = current as number
+ upperBound = current as number
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| let upperBound = max | |
| if (range && Array.isArray(current)) { | |
| lowerBound = current[0] | |
| upperBound = current[1] | |
| } else { | |
| upperBound = current as number | |
| } | |
| let upperBound = max | |
| if (range && Array.isArray(current)) { | |
| lowerBound = current[0] | |
| upperBound = current[1] | |
| } else { | |
| lowerBound = current as number | |
| upperBound = current as number | |
| } |
| } | ||
| const renderRangeButton = () => { | ||
| return [0, 1].map((item, index) => { | ||
| const cls = `${index === 0 ? 'nut-range-button-wrapper-left' : ''} | ||
| ${index === 1 ? 'nut-range-button-wrapper-right' : ''}` | ||
| return ( | ||
| <div | ||
| key={index} | ||
| className={cls} | ||
| onTouchStart={(e: any) => { | ||
| setButtonIndex(index) | ||
| onTouchStart(e) | ||
| }} | ||
| onTouchMove={onTouchMove} | ||
| onTouchEnd={onTouchEnd} | ||
| onTouchCancel={onTouchEnd} | ||
| onClick={(e) => e.stopPropagation()} | ||
| > | ||
| {renderButton(index)} | ||
| </div> | ||
| ) | ||
| }) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
优化 renderRangeButton 函数的返回
在 renderRangeButton 函数中，直接返回 map 的结果可以提高代码可读性。
可以简化为：
- return [0, 1].map((item, index) => {
+ return (
[0, 1].map((item, index) => {
// ...代码内容
})
)Committable suggestion was skipped due to low confidence.
src/packages/range/range.taro.tsx
Outdated
| const isRange = (val: any) => { | ||
| return !!range && Array.isArray(val) | ||
| } | ||
|
|
||
| const scope = useMemo(() => { | ||
| return max === min ? 0.1 : max - min |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
src/packages/range/range.tsx (3)
147-152: 优化 scope 计算并改进错误处理使用
useMemo来计算scope是一个很好的优化。然而，有几点建议：
- 考虑使用更健壮的错误处理方式，而不是简单的
console.log。在生产环境中，这可能不是最佳选择。- 为了国际化考虑，错误消息应该使用英语或支持多语言。
- 当
max === min时，可能需要特殊处理，而不是简单地继续计算scope。建议修改如下：
const scope = useMemo(() => { if (max < min) { throw new Error('Max value must be greater than min value'); } if (max === min) { return 1; // 或者返回一个小的默认值，具体取决于组件的需求 } return max - min; }, [max, min]);🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 149-150: src/packages/range/range.tsx#L149-L150
Added lines #L149 - L150 were not covered by tests
329-332: 优化 renderRangeButton 函数中的事件处理在
renderRangeButton函数中，将setButtonIndex调用移到onTouchStart处理程序内是一个很好的改进：
- 确保在触摸事件开始时正确设置按钮索引，这在逻辑上更合理。
- 可能修复了之前按钮索引可能未正确设置的潜在问题。
建议考虑使用 React 的
useCallback来优化这些事件处理函数，特别是如果它们被传递给子组件时。例如：const handleTouchStart = useCallback((index: number) => (e: TouchEvent<HTMLDivElement>) => { setButtonIndex(index); onTouchStart(e); }, [onTouchStart]); // 在 JSX 中使用 onTouchStart={(e) => handleTouchStart(index)(e)}这可以进一步优化性能，特别是在复杂组件中。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 329-329: src/packages/range/range.tsx#L329
Added line #L329 was not covered by tests
347-348: 优化 renderSingleButton 函数中的事件处理在
renderSingleButton函数中，直接将事件处理程序分配给 div 元素是一个很好的改进：
- 通过移除不必要的箭头函数，简化了代码。
- 通过避免在每次渲染时创建新的函数实例，可能会提高性能。
这个修改使单个按钮的渲染更加清晰和高效。然而，为了保持一致性，建议考虑使用与
renderRangeButton相同的方法来处理这些事件，可能使用useCallback来进一步优化。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- src/packages/range/range.taro.tsx (8 hunks)
- src/packages/range/range.tsx (7 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/range/range.taro.tsx
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/range/range.tsx
[warning] 149-150: src/packages/range/range.tsx#L149-L150
Added lines #L149 - L150 were not covered by tests
[warning] 185-185: src/packages/range/range.tsx#L185
Added line #L185 was not covered by tests
[warning] 232-232: src/packages/range/range.tsx#L232
Added line #L232 was not covered by tests
[warning] 272-272: src/packages/range/range.tsx#L272
Added line #L272 was not covered by tests
[warning] 277-277: src/packages/range/range.tsx#L277
Added line #L277 was not covered by tests
[warning] 329-329: src/packages/range/range.tsx#L329
Added line #L329 was not covered by tests
🔇 Additional comments (5)
src/packages/range/range.tsx (5)
7-7: 导入 useMemo 以优化性能引入
useMemo是一个很好的做法，它可以帮助优化组件的性能，特别是在处理复杂计算时。这个改动为后续的性能优化铺平了道路。
155-157: 优化 calcMainAxis 和 calcOffset 函数在
calcMainAxis和calcOffset函数中直接使用scope值而不是调用它作为函数是一个很好的改进。这个变化：
- 与新的 memoized
scope值保持一致。- 简化了代码。
- 通过避免不必要的函数调用，可能会提高性能。
这些修改使代码更加清晰和高效。
Also applies to: 161-161
232-232: 优化 click 函数中的值计算在
click函数中，value的计算现在直接使用scope，这是一个很好的改进：
- 保持了与新的 memoized
scope值的一致性。- 简化了计算逻辑。
- 可能会带来轻微的性能提升。
这个修改使代码更加清晰和高效。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 232-232: src/packages/range/range.tsx#L232
Added line #L232 was not covered by tests
272-272: 优化 onTouchMove 函数中的差值计算在
onTouchMove函数中，diff的计算（包括水平和垂直情况）现在直接使用scope，这是一个很好的改进：
- 与新的 memoized
scope值保持一致。- 简化了计算逻辑。
- 可能带来轻微的性能提升。
- 保留了 RTL（从右到左）处理的逻辑。
这些修改使触摸移动的处理更加清晰和高效。
Also applies to: 277-277
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 272-272: src/packages/range/range.tsx#L272
Added line #L272 was not covered by tests
Line range hint
1-398: 总体评价：性能优化和代码改进这次更改主要集中在性能优化和代码简化上，总体来说是很好的改进：
- 引入
useMemo来计算scope是一个关键的优化，可以避免不必要的重复计算。- 多个函数（如
calcMainAxis、calcOffset、click、onTouchMove）已更新为直接使用 memoized 的scope值，这简化了代码并可能提高性能。- 事件处理逻辑在
renderRangeButton和renderSingleButton中得到了简化。建议进一步改进的地方：
- 错误处理：考虑使用更健壮的错误处理机制，而不是简单的 console.log。
- 国际化：错误消息应该使用英语或支持多语言。
- 事件处理的一致性：考虑在
renderRangeButton和renderSingleButton中使用相同的事件处理方法，可能使用useCallback来进一步优化。总的来说，这些更改提高了组件的性能和可读性，是一个很好的改进。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 185-185: src/packages/range/range.tsx#L185
Added line #L185 was not covered by tests
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (4)
src/packages/range/__test__/range.spec.tsx (4)
164-172: 建议改进点击测试用例这个测试用例模拟了对Range组件的点击，这是一个很好的开始。然而，目前缺少断言来验证点击后的预期行为。建议添加断言来检查点击后的状态变化，例如滑块的位置或值是否如预期更新。这将使测试更加完整和有意义。
示例改进：
test('range click test', () => { const { container } = render( <Range defaultValue={40} style={{ color: 'red' }} /> ) const rangeBar = container.querySelector('.nut-range-bar') as HTMLElement if (rangeBar) { fireEvent.click(rangeBar) // 添加断言，例如： // expect(container.querySelector('.number')?.innerHTML).not.toBe('40') } })
184-192: 建议完善禁用状态的点击测试这个测试用例正确地模拟了对禁用状态Range组件的点击，这是一个很好的测试场景。然而，目前缺少断言来验证点击在禁用状态下没有效果。建议添加断言来确保组件的状态在点击后没有变化。
示例改进：
test('range click disable test', () => { const initialValue = 40 const { container } = render( <Range defaultValue={initialValue} disabled style={{ color: 'red' }} /> ) const rangeBar = container.querySelector('.nut-range-bar') as HTMLElement if (rangeBar) { fireEvent.click(rangeBar) // 添加断言，例如： // expect(container.querySelector('.number')?.innerHTML).toBe(initialValue.toString()) // 确保滑块位置没有改变 // const button = container.querySelector('.nut-range-button') as HTMLElement // expect(button.style.left).toBe(`${initialValue}%`) } })
194-202: 建议完善垂直模式的点击测试这个测试用例正确地模拟了对垂直模式Range组件的点击，这是一个重要的测试场景。然而，目前缺少断言来验证垂直模式下点击后的行为。垂直模式可能需要与水平模式不同的断言。
建议改进：
- 添加断言来检查点击后的状态变化。
- 特别关注垂直方向上的变化，如滑块的top属性而不是left属性。
示例改进：
test('range click vertical test', () => { const initialValue = 40 const { container } = render( <Range defaultValue={initialValue} vertical style={{ color: 'red' }} /> ) const rangeBar = container.querySelector('.nut-range-bar') as HTMLElement if (rangeBar) { fireEvent.click(rangeBar) // 添加断言，例如： // expect(container.querySelector('.number')?.innerHTML).not.toBe(initialValue.toString()) // 检查垂直方向上的变化 // const button = container.querySelector('.nut-range-button') as HTMLElement // expect(button.style.top).not.toBe(`${initialValue}%`) } })
204-220: 触摸测试结构良好，建议小幅改进这个测试用例很好地模拟了Range组件的触摸交互，包括了touchStart、touchMove和touchEnd事件，这是一个全面的测试。测试结构清晰，并且包含了适当的断言，这些都是很好的实践。
然而，当前的断言假设触摸操作总是会将值设置为最大值（100）。为了使测试更加灵活和准确，建议根据模拟的触摸位置来计算预期值。
建议改进：
test('range touch test', () => { const initialValue = 40 const { container } = render(<Range defaultValue={initialValue} />) const track = container.querySelector('.nut-range-button') const button = container.querySelector('.number') if (track) { const startX = 0 const moveX = 10 fireEvent.touchStart(track, { touches: [{ clientX: startX }], }) fireEvent.touchMove(track, { touches: [{ clientX: moveX }], }) fireEvent.touchEnd(track) // 计算预期值（这里需要根据实际的计算逻辑进行调整） const expectedValue = Math.min(100, initialValue + (moveX - startX)) expect(button?.innerHTML).toBe(expectedValue.toString()) } })这个改进将使测试更加准确，并且能够适应不同的触摸位置和移动距离。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
src/packages/range/__test__/__snapshots__/range.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (3)
- src/packages/range/test/range.spec.tsx (2 hunks)
- src/packages/range/range.taro.tsx (9 hunks)
- src/packages/range/range.tsx (10 hunks)
🧰 Additional context used
🪛 Biome
src/packages/range/range.taro.tsx
[error] 264-266: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Check: codecov/patch
src/packages/range/range.tsx
[warning] 149-150: src/packages/range/range.tsx#L149-L150
Added lines #L149 - L150 were not covered by tests
[warning] 185-185: src/packages/range/range.tsx#L185
Added line #L185 was not covered by tests
[warning] 277-277: src/packages/range/range.tsx#L277
Added line #L277 was not covered by tests
[warning] 329-329: src/packages/range/range.tsx#L329
Added line #L329 was not covered by tests
🔇 Additional comments (12)
src/packages/range/__test__/range.spec.tsx (1)
3-3: 导入语句更新正确导入
fireEvent是一个好的做法，因为它为新添加的测试用例提供了模拟用户交互的能力。这个更改是必要的，并且遵循了只导入所需模块的最佳实践。src/packages/range/range.tsx (9)
7-7: 导入 useMemo 以优化性能引入
useMemo是一个很好的做法，它可以帮助优化组件的性能，特别是在处理复杂计算时。这个改动为后续的性能优化铺平了道路。
92-94: 新增 exactValue 状态以跟踪精确值引入
exactValue状态是一个好主意，它可以帮助跟踪滑块的精确位置，特别是在拖动过程中。这样可以提高用户体验，使滑块移动更加流畅。建议：考虑使用
useRef而不是useState来存储exactValue，因为它不需要触发重新渲染。这可能会稍微提高性能。const exactValueRef = useRef<RangeValue>(value || defaultValue || 0);
147-152: 优化 scope 计算并增加错误处理使用
useMemo来计算scope是一个很好的优化。它可以避免在每次渲染时都重新计算这个值，特别是当max和min不经常变化时。对于
max < min或max === min的情况进行检查也是一个很好的做法。然而，目前的处理方式可以进一步改进：
- 使用
console.warn而不是console.log来输出警告信息。- 在无效情况下返回一个默认值，以确保组件不会崩溃。
建议修改如下：
const scope = useMemo(() => { if (max <= min) { console.warn('Range 组件：max 的值需要大于 min 的值'); return 1; // 返回一个默认值 } return max - min; }, [max, min]);这样可以确保即使在无效输入的情况下，组件也能够正常工作。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 149-150: src/packages/range/range.tsx#L149-L150
Added lines #L149 - L150 were not covered by tests
155-157: 优化 calcMainAxis 和 calcOffset 函数将
scope直接用作值而不是函数调用是一个很好的改进。这与新的useMemo实现保持一致，并且可能会略微提高性能。这种改变使代码更加清晰和高效。Also applies to: 161-161
181-181: 优化 marksStyle 函数在
marksStyle函数中直接使用scope值而不是调用函数是一个很好的改进。这与之前的更改保持一致，使代码更加统一和高效。这种小的优化可以在大型应用中累积成显著的性能提升。Also applies to: 185-185
232-233: 优化 click 函数并同步 exactValue在
click函数中直接使用scope值是一个很好的改进，与之前的更改保持一致。添加
setExactValue(current)是一个好主意，它确保了精确值与当前值同步。然而，考虑到exactValue的用途，我们可以进一步优化：const newValue = min + (delta / total) * scope; setExactValue(newValue);这样可以直接设置
exactValue为新计算的值，而不是当前值，可能会提供更精确的用户体验。
272-272: 优化 onTouchMove 函数并更新 exactValue在
onTouchMove函数中的更改非常好：
- 直接使用
scope值保持了与之前更改的一致性，提高了代码的统一性。- 添加
setExactValue(newValue)确保了在触摸移动过程中精确值得到更新，这可以提供更流畅的用户体验。这些更改使得滑块的行为在拖动过程中更加精确和响应迅速。
Also applies to: 277-277, 286-286
329-332: 优化事件处理器和按钮索引设置这些更改提高了代码的效率和清晰度：
在
renderRangeButton中添加setButtonIndex(index)确保了在范围滑块上开始触摸时正确设置按钮索引。这对于正确处理多按钮滑块很重要。直接引用事件处理器而不是包装在箭头函数中可以提高性能，因为它避免了在每次渲染时创建新的函数实例。
建议：考虑使用
useCallback来记忆这些事件处理函数，特别是如果它们依赖于可能经常变化的 props 或 state。例如：const handleTouchStart = useCallback((e: TouchEvent<HTMLDivElement>, index?: number) => { if (index !== undefined) setButtonIndex(index); onTouchStart(e); }, [setButtonIndex, onTouchStart]);这可以进一步优化性能，特别是在复杂组件中。
Also applies to: 347-348
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 329-329: src/packages/range/range.tsx#L329
Added line #L329 was not covered by tests
Line range hint
1-400: 总体评价：性能优化和用户体验提升这次更新对 Range 组件进行了多方面的改进：
- 性能优化：引入
useMemo来缓存scope计算，并在多处直接使用scope值而不是函数调用。- 用户体验提升：引入
exactValue状态来跟踪精确的滑块位置，使滑动更加流畅。- 错误处理：增加了对无效
max和min值的检查。- 代码清晰度：简化了多个计算函数，使代码更易读和维护。
- 事件处理优化：改进了事件处理器的绑定方式，潜在地提高了性能。
这些更改整体上遵循了 React 的最佳实践，提高了组件的质量和性能。虽然还有一些小的改进空间（如使用
useCallback优化事件处理器），但总的来说，这是一次成功的重构。建议：
- 考虑添加单元测试来覆盖新增的逻辑，特别是
exactValue的处理和边界条件检查。- 更新组件文档，反映新的
exactValue行为和改进的性能特性。🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 185-185: src/packages/range/range.tsx#L185
Added line #L185 was not covered by testssrc/packages/range/range.taro.tsx (2)
128-143: 注意单值模式下markClassName函数的逻辑在非范围选择模式下，
markClassName函数中lowerBound仍然等于min。这可能导致对于标记的激活状态判断不准确。
320-341: 优化renderRangeButton函数的返回结构在
renderRangeButton函数中，可以直接返回map方法的结果，提高代码的简洁性和可读性。
| test('range click test', () => { | ||
| const state = { | ||
| value0: [30, 60], | ||
| } | ||
| const { container } = render(<Range range defaultValue={state.value0} />) | ||
| if (container.querySelector('.nut-range-bar')) { | ||
| fireEvent.click(container.querySelector('.nut-range-bar') as HTMLElement) | ||
| } | ||
| }) |
There was a problem hiding this comment.
重复的测试名称和缺少断言
-
这个测试用例与前一个同名，可能会导致混淆。建议使用更具描述性的名称，如
'range click test in range mode'。 -
同样，这个测试也缺少断言来验证点击后的行为。建议添加断言来检查点击后的状态变化。
示例改进：
test('range click test in range mode', () => {
const initialValue = [30, 60]
const { container } = render(<Range range defaultValue={initialValue} />)
const rangeBar = container.querySelector('.nut-range-bar') as HTMLElement
if (rangeBar) {
fireEvent.click(rangeBar)
// 添加断言，例如：
// const newValue = container.querySelectorAll('.number')
// expect(newValue[0].innerHTML).not.toBe(initialValue[0].toString())
// expect(newValue[1].innerHTML).not.toBe(initialValue[1].toString())
}
})| return isRange(modelVal) | ||
| ? `${((modelVal[1] - modelVal[0]) * 100) / scope}%` | ||
| : `${((modelVal - min) * 100) / scope}%` |
There was a problem hiding this comment.
确保 scope 不为零以避免计算错误
在函数 calcMainAxis、calcOffset、marksStyle、onTouchMove 等多处，使用了 scope 进行除法运算。如果 scope 为零，可能导致计算结果为 Infinity 或 NaN。应在使用前验证 scope 的值，确保计算的可靠性。
建议在计算之前检查 scope 值：
if (scope === 0) {
// 处理 scope 为零的情况
return;
}Also applies to: 161-161, 181-181, 185-185, 232-232, 272-272, 277-277
| const onTouchStart = (event: any) => { | ||
| if (disabled) { | ||
| return | ||
| } | ||
| touch.start(event) | ||
| setEaxctValue(current) | ||
| setExactValue(current) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
检查 exactValue 状态的必要性
在 onTouchStart 和 onTouchMove 方法中，多次调用了 setExactValue 更新 exactValue 状态。但在后续代码中，似乎没有对 exactValue 进行使用。这可能是一个冗余的状态更新。
如果确实不需要 exactValue，建议删除相关的状态声明和更新操作，以精简代码。
Also applies to: 286-286
| const scope = useMemo(() => { | ||
| if (max < min || max === min) { | ||
| console.log('max 的值需要大于 min的值') | ||
| } | ||
| return max - min | ||
| }, [max, min]) |
There was a problem hiding this comment.
解决当 max === min 时的除零问题
当 max 等于 min 时，scope 将为零，可能导致后续计算中出现除零错误或 NaN 值。建议在这种情况下，直接返回或给出提示，避免计算错误。
可以考虑修改如下：
if (max < min || max === min) {
- console.log('max 的值需要大于 min的值')
+ throw new Error('`max` 值必须大于 `min` 值')
}Committable suggestion was skipped due to low confidence.
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
Bug 修复
样式