我有一个场景是一次性加载大量的🚗在地图上打点;
然后通过 ws 更新"移动"的车, 从而更新地图上的点位.
ws 拿到数据并更新 redux 指定数组元素的数据已经完成了;
但是问题就是我如何在 react hooks 组件中监听差集数据呢?
--
vue pinia 的话我是这样做的
carStore.$onAction(({name, args}) => {
// 业务逻辑...
})
1
chnwillliu 114 天前 via Android
useSelector
|
2
edk24 OP @chnwillliu useSelector 如何得到差集呢, 主要是要差集
然后在地图上差异的更新点位, 而不是全部删了 又全部重新打点 statue: { car:[] } 拿到 car 变化的数据, 例如原本是 [1,2,3,4,5], 更新了 2 条 [1,4,3,4,6], 我要拿到 [4,6] |
3
webszy 114 天前
参考 vue 的 dom diff 算法
|
4
iapplebear 114 天前
把每次变化后的数据计算好存到 car ,car 里面有就 filter 掉,没有就 concat 。useEffect(() => { doSomething(car) }, [car])
React 的依赖更新只会处理差异数据并不是批量替换的 |
5
daolanfler 114 天前
再加两个状态呗,newCars[], removeCards: [] dispatch 更新的时候把这两个状态一起更新了。如果你的地图组件是独立于 react 的,在 useEffect 里面可以增量更新移除。
如果地图组件也是 react 的话,那更新 cars 就行,不用设置多的状态,直接交给 React 去渲染得了。 |
6
edk24 OP @daolanfler 我现在就是这样做的了, dispatch 更新时, 一边维护原有的数据, 一边记录本次的 car
然后在组件中使用 useSelector + useEffect 来 watch 车辆的更新 |