对于需要依赖Form状态的引用有什么性能好一点的办法吗

[xmsz]

背景

• 有一个Edit组件，里面有个Form和一个Preview组件
• Preview组件根据Form的状态进行渲染

需求

• 有什么性能好点的办法处理这种场景

我们的尝试

第一种，Form状态更新储存在Edit的state里，Preview直接拿state进行渲染

好处：简单，直观

缺点：Form在输入的时候会一直触发更新state，从而导致整个Edit组件进行重渲染，在输入框多得情况下非常卡

第二种，针对第一种方案，进行防抖处理

效果并没有很好，而且预览显得特别卡顿，体验更差

第三种，使用其他通信方式更新

比如事件、redux之类的方式。

效果还行，毕竟不会循环更新，但是缺点就是维护很麻烦，简单需求变得复杂了

第四种，直接使用field.getValue来传递值

优点：也是简单
缺点：更新不一定实时

[eternalsky]

感觉还是应该从控制更新范围来出发，如果每次渲染只有 Edit 的那个，和 Preview 去渲染，那么性能一定不会很差，这里可以用上 shouldComponentUpdate 或者 useMemo 去控制渲染的范围。