search

alibaba / formily

📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
https://formilyjs.org/
MIT License
11.43k stars 1.49k forks source link

使用@formily/react-schema-renderer，在IE11上问题 #790

Closed qinfuji closed 4 years ago

qinfuji commented 4 years ago

使用@formily/react-schema-renderer库SchemaForm ，InternalField建立自定义的Field, 在循环创建Filed时，在IE11上性能很低，渲染100个Field基本用了28秒 ， 通过IE11开发者工具分析在HTML分析阶段经常触发垃圾回收

业务需求是试卷试题，每个试题课时是单选、多选、每个习题封装成了一个Filed，应该匹配formily的场景， 不知道是不是使用错误还是bug，请帮助解惑，谢谢

codesandbox 源码演示地址 IE11运行地址 默认IE10进行渲染

image

image

janryWang commented 4 years ago

你给的例子怎么看代码

qinfuji commented 4 years ago

你给的例子怎么看代码

不好意思，我贴错链接了，已经修改了代码地址

janryWang commented 4 years ago

@qinfuji 你这个codesandbox例子，在ie11上跑不起来，我猜测是codesandbox不支持ie11，你想个办法给个可以在ie11上复现问题的地方吧 image

qinfuji commented 4 years ago

@qinfuji 你这个codesandbox例子，在ie11上跑不起来，我猜测是codesandbox不支持ie11，你想个办法给个可以在ie11上复现问题的地方吧 image

我打个包发给你吧？

qinfuji commented 4 years ago

@qinfuji 你这个codesandbox例子，在ie11上跑不起来，我猜测是codesandbox不支持ie11，你想个办法给个可以在ie11上复现问题的地方吧

加了一个可以运行IE11的地址。是开发环境，地址在原帖上。

跟踪了一下代码，可能在registerField时进行 heart.batch 是导致IE11频繁gc, 导致加载很慢

janryWang commented 4 years ago

多谢给这么详细的例子，我这边排查下

janryWang commented 4 years ago

该问题是因为表单初始化的时候会执行状态树同步，计算量比较大，在ie11下带不起来，给出来的解决方案是将初始化状态树同步行为改为惰性同步

<SchemaForm initializeLazySyncState/>

需要考虑一个副作用问题，避免以下写法

onFieldValueChange$().subscribe(() => {
  const values = actions.getFormState(state => state.values)
  //初始化阶段基于当前表单的某个值去做一些处理
})