反应，还原 DOM 更新，但在 Chrome 中没有重排

编程问答 2022-06-01

问题描述

我的代码在 React 中。因此，在一个组件中，比如 AppViewerEvents，我正在处理画布内的 mouseMove 事件。它获取画布上的当前鼠标指针坐标并分派 redux 操作，该操作只需使用新值更新 coordinates 对象。

<ScreenSpaceEvent
                    type={Cesium.ScreenSpaceEventType.MOUSE_MOVE}
                    action={(e: CesiumMovementEvent) => {
                        const position = scene?.pickPosition(e.endPosition!);
                        if (position) {
                            const cartographic = Cesium.Cartographic.fromCartesian(position);
                            const longitude = Cesium.Math.todegrees(cartographic.longitude);
                            const latitude = Cesium.Math.todegrees(cartographic.latitude);
                            dispatch(setCoordinates({ longitude,latitude,elevation: cartographic.height }));
                        }
                    }}
                />

reducer 每次都非常快地处理这个动作，所以 redux 不是问题。 在另一个组件 CoordinatesBar 中，我通过 useSelector 订阅了这块商店，并在 JSX 中像这样渲染这个坐标：

                    const { coordinates } = useSelector(state => state.projectView);
...

                    <div className='coord'>
                        <span className='spacer'>
                            {${coordinates.longitude?.toFixed(numberOfDigits)}° N`}
                        </span>
                    </div>
                    <div className='line' />
                    <div className='coord'>
                        <span className='spacer'>
                            {${coordinates.latitude?.toFixed(numberOfDigits)}° E`}
                        </span>
                    </div>

问题是：如果我在 devtools 元素选择器中检查我的页面，我可以看到每次事件触发时 DOM 更新（跨度值更改），并按预期调度操作。但我没有看到页面本身上的“重绘”或回流。只有在我停止移动鼠标和触发事件时才会发生。此外，在 Firefox 中并非如此，仅在 Chrome 中才如此。 请帮忙，我已经用谷歌搜索了 3 天，什么也没找到。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cesiumdom-eventsjavascriptreactjsreactjsreduxreduxredux