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

[BUG] 组件重复渲染 #344

Closed
jinasonlin opened this issue Apr 28, 2021 · 4 comments
Closed

[BUG] 组件重复渲染 #344

jinasonlin opened this issue Apr 28, 2021 · 4 comments
Assignees

Comments

@jinasonlin
Copy link

1.依赖仓库的版本

  • form-render:1.x

2.问题描述
表单结构复杂的情况,快速输入数据存在明显卡顿现象。
通过 Profiler 排查,发现更新局部数据也会导致整个组件树重新渲染。同时目前提供的 debounceInput 并不能优化渲染问题。
希望得到优化,谢谢。

WX20210428-201019@2x

3.最小复现demo

https://codesandbox.io/s/zidingyizujian-forked-8q325

@FateRiddle
Copy link
Contributor

@jinasonlin 谢谢issue,这里确实有不少优化的空间。能问一下你的profiler上怎么显示“why did this render”的?我这边似乎没有。

关于重复渲染和优化,说几点感想

  1. 功能和性能本身就是个鱼和熊掌的事儿。你提供的例子是有6-7层嵌套的表单。正常的业务场景最深3层,再多用户就要造反了。所以我们的优化会基于更现实的场景部分,而不是考虑6层的嵌套结构。
  2. form-render 之所以会出现一些重复渲染,在于表单的联动,谢谢建议使用profiler查看一下,我确实能看到一些问题和改进点。重复渲染的问题其实已经在extendWidget这层做过严格判断,大多会在那层打住,list场景似乎有写问题,我们会进一步优化。谢谢建议。
    image

@jinasonlin
Copy link
Author

@FateRiddle

谢谢回复。

Profiler 选项中,勾选 Record why each component rendered while profiling.
image

当时使用 form-render 时,确实未涉及表单联动。复杂的 Schema 是有可能的,而且不好避免。更期望的样子是下面这样,规避掉无关的渲染。
image

@FateRiddle
Copy link
Contributor

这块做了一定的优化了。底层增加了useMemo,context也根据使用频率切了好几份。
性能优化上,我们会以正常能使用为标准,只要不成为短板就ok。x-render会把更多精力投入到开发体验、功能丰富和场景覆盖上。

@FateRiddle FateRiddle mentioned this issue May 10, 2021
Merged
@liushan-github
Copy link

O4_Q0`Z4AF}$R(UD1_5K BF
image

输入框一直输入会导致全局渲染,注册了6个form

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

4 participants