Javascript 滚动时设置状态使滚动变慢

我在一个函数中使用setState，每次滚动以获取要在特定计算中使用的

偏移量

值时都会触发该函数。我注意到在滚动时使用setState会使滚动非常滞后，而且不平滑。在计算时，如何使滚动平滑

我的功能

    /**
     * @override
     */
    onWidgetScroll(e) {
        const myDiv = document.getElementById('myScroll');
        this.setState({
            offSet: myDiv && Math.abs(myDiv.getBoundingClientRect().top) + 60,
        });
    }

容器是这样的，里面有许多组件

<div>
     <div id="myScroll">
          /*Other components*/
     </div>
</div>

/*其他组成部分*/

---

如果没有设置状态，滚动会更加平滑。使用setState会使它滞后。

至少我能理解它滞后的原因。在DOM元素上调用

getBoundingClientRect（）

是一个错误，setState将重新加载DOM的部分，这也会导致明显的延迟。计算的目标是什么？你到底想对WidgetScroll做什么？@ChristopherBradshaw我正在滚动的部门有一个卡片列表。我想显示现在看到的是哪张卡。为此，我正在使用偏移量、卡片宽度和高度等进行计算。首先，使用React refs，而不是React中的方式。第二，如果滚动处理程序没有破坏ux/ui，则可以取消其抖动。@gaditzkhori我也取消了抖动。但同样的结果你们能在codesandbox中分享工作示例吗？嗯，我至少能理解它为什么会滞后。在DOM元素上调用

getBoundingClientRect（）

是一个错误，setState将重新加载DOM的部分，这也会导致明显的延迟。计算的目标是什么？你到底想对WidgetScroll做什么？@ChristopherBradshaw我正在滚动的部门有一个卡片列表。我想显示现在看到的是哪张卡。为此，我正在使用偏移量、卡片宽度和高度等进行计算。首先，使用React refs，而不是React中的方式。第二，如果滚动处理程序没有破坏ux/ui，则可以取消其抖动。@gaditzkhori我也取消了抖动。但同样的结果你们能在codesandbox中分享工作示例吗？