react子函数调用父函数速度较慢

Question

我尽量保持简短，但要有足够的细节。

我有一个年历，我需要它是交互式的，这样当你点击一个日期并将鼠标拖到另一个日期时，当前拖动范围内的所有日期都会在临时状态下动态地更改它们的类。然后，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 />组件中使用，以确定用于呈现该<Shift>的CSS类。

事实证明，简单地调用日期设置函数会极大地减慢整个过程，并且在拖动事件中存在巨大的延迟，即使我修改了代码，使开始和结束日期除了存储在<Year>中之外什么也不做。

这就像我在不必要地重新呈现整个<Year>组件，这意味着所有其他组件也会重新呈现，但由于开始和结束日期甚至没有传递到任何地方，我看不出该如何处理？

任何关于重组工作流程的帮助都将不胜感激。

Answer 1

解决方案是使用PureComopnents而不是Components (或者使用具有清晰定义的逻辑的componentShouldUpdate() )，并使用immuatableJS来确保我使用了适当的不可变对象...而我显然没有(我真丢脸！)

Answer 2

这听起来就像你在悬停时不断更新状态一样。为了避免这种情况，请使用一个去保释器，以便只在悬停结束时更新状态：

// Shift component

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

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