Question

我试图尽可能简短，但有足够的细节。

我有一个年度日历，我需要互动，以便当您点击日期并将鼠标拖到另一个日期时，当前拖动范围内的所有日期都会在临时状态下动态更改其类。然后，word[:-1] + "ies"事件会使临时更改成为永久性更改。

日历被分解为类对象，以便：

onMouseUp

<Year> <Month> <Day> <Shift {some state values from Year need to be passed here}/> </Day> </Month> </Year>包含一些函数，用于更改<Year>的构造函数中的某些状态 - 即开始日期和结束日期。此函数一直传递到<Year>，因此当<Shift>事件发生onMouseDown级别时，它会调用<Shift>中设置开始日期的函数。

此外，悬停使用相同的流程设置结束日期，因此点击一个然后拖动多个<Year>组件会将开始日期和结束日期设置为<Shift />级别。当用户对他们的选择感到满意时，<Year>事件会将这些更改提交给永久显示。此开始日期和结束日期旨在用于每个onMouseUp组件，以确定用于呈现<Shift />的CSS类。

事实证明，简单地调用日期设置函数可以大大减慢整个过程，并且拖动事件存在大量延迟，即使我修改代码使得开始日期和结束日期除了存储在{{1 }}

这就像我不必要地重新渲染整个<Shift>组件，意味着所有其他组件也被重新渲染，但由于开始和结束日期甚至没有被传递到任何地方，我看不到如何？

任何有关重组工作流程的帮助都将受到赞赏。

Answer 1

听起来你在徘徊时不断更新状态。为避免这种情况，请使用去抖动器，以便仅在悬停结束时更新状态：

// Shift component

debounceSetEnd(date) {
   clearTimeout(this.timer);
   this.timer = setTimeout(() => this.props.setEnd(date), 1000);
}

onMouseEnter={() => this.debounceSetEnd(this.props.date)}

Answer 2

解决方案是使用PureComopnent而不是Component s（或者使用具有明确定义逻辑的componentShouldUpdate()）并使用immuatableJS来确保我使用了正确的不可变对象。我显然没有（对我感到羞耻！）

反应子调用父函数很慢

2 个答案: