Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

map的clone会导致重复render #346

Closed
starInEcust opened this issue Dec 5, 2023 · 5 comments
Closed

map的clone会导致重复render #346

starInEcust opened this issue Dec 5, 2023 · 5 comments

Comments

@starInEcust
Copy link
Contributor

下面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
Copy link
Member

Map 组件是其他组件的基础,Map 组件会给所有的子组件注入三个属性 **`map`****`container`****`AMap`**

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

const { map } = useMapContext();

@jaywcjlove
Copy link
Member

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

jaywcjlove added a commit that referenced this issue Dec 5, 2023
@jaywcjlove
Copy link
Member

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

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

@starInEcust
Copy link
Contributor Author

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

@jaywcjlove
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants