uiwjs / react-amap

基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
https://uiwjs.github.io/react-amap
MIT License
428 stars 70 forks source link

map的clone会导致重复render #346

Closed starInEcust closed 12 months ago

starInEcust commented 12 months ago

下面map这个代码

  {AMap &&
          map &&
          childs.map((child, key) => {
            if (!isValidElement(child)) return null;
            if (typeof child === 'string') {
              return cloneElement(<Fragment>{child}</Fragment>, { key });
            }
            if (child.type && typeof child.type === 'string') {
              return cloneElement(child, { key });
            }
            return cloneElement(child, {
              ...child.props,
              AMap,
              map,
              container,
              key,
            });
          })}

会导致子组件useMemo失效. 只要有state变化就会重复渲染,性能大大的坏。 比如下面代码, 任意的state变化,都会导致Circle的重新渲染,非常的神奇。 我就是在切换数据源的时候发现Circle会多次渲染,还没有销毁,然后发现了Circle销毁逻辑有问题

const circle = useMemo(() => <Circle />, []);
return 
<Map><Circle /> <Map>
jaywcjlove commented 12 months ago

https://github.com/uiwjs/react-amap/blob/77031387483694330bf7fed970e19631c3cf720f/packages/map/README.md?plain=1#L8

@starInEcust 这个是兼容最老的方式,向子组件传递 mapcontainerAMap 的方法,不过现在可以移除它,因为后面更新了一版本,map 对象通过 context 传递到子组件,并且可以跨组件传递

https://github.com/uiwjs/react-amap/blob/77031387483694330bf7fed970e19631c3cf720f/packages/circle/src/useCircle.tsx#L9

jaywcjlove commented 12 months ago

@starInEcust 我们可以升级个大版本 v6 把这个移除掉

jaywcjlove commented 12 months ago

移除了 v2.5.0+ -> v5 支持的通过 props 传递 mapcontainerAMap 对象的功能 @starInEcust

在 v6 版本移除的了多个过时的 API

starInEcust commented 12 months ago

哇~好猛啊,一夜醒来变成6了

jaywcjlove commented 12 months ago

@starInEcust 大的版本更新,算是破坏性更新,中间迭代了几十个版本,现在移除老的 API 不算过分,如果不是特别老的项目升级,都不需要该代码