react-component / form

React High Order Form Component(web & react-native)
http://react-component.github.io/form/
MIT License
1.81k stars 296 forks source link

2.2.5版本的cleanUpUselessFields带来的问题 #205

Closed TotooriaHyperion closed 6 years ago

TotooriaHyperion commented 6 years ago

问题背景:

由于getForm 的mixin返回的每次都是一个新对象,所以每次react的渲染都必然触发【所有接收了form作为props的节点】的重新渲染。 但我们有很多非常复杂的form(主要是有很多嵌套,层级,动态增加条目的情况),所以我们从顶层阻止了form的渲染,通过在根节点forceUpdate来提升性能。

而这就导致了当我们进行第1次修改值后,在form decorator的componentDidUpdate中使用cleanUpUselessFields的时候,那些经过计算我们认为无需重复渲染的节点,并没有执行getFieldDecorator,而renderFields又在第1次修改的同时被清空了,此时就只有本次修改的field被保留,其他field全部被清除了。 此时就仅有第1次修改的field可以继续使用,其他field失效,无法进行任何操作。 如果此时尝试修改其他field,那么就会一方面修改失败(因为这个field不存在)另一方面导致第1次修改的field也被清空,最终的结果就是,所有field不可用。

我认为在每一个状态更新的循环中,强制对每一个使用了form的节点进行渲染是没有必要的。 不应该在getForm中返回新的form对象来【隐式地触发所有使用了form的节点的渲染】,而是应该有【显式】的配置支持渲染策略。

TotooriaHyperion commented 6 years ago

相关PR

204

zombieJ commented 6 years ago

能给个在线重现不?我看看你的使用场景。 一般来说 form 本身就会做 cache,不用额外特地优化:https://github.com/react-component/form/blob/master/src/createBaseForm.js#L142

TotooriaHyperion commented 6 years ago

能给个在线重现不?我看看你的使用场景。 一般来说 form 本身就会做 cache,不用额外特地优化:https://github.com/react-component/form/blob/master/src/createBaseForm.js#L142

我们是在我们自己的组件渲染层面进行的优化。和form的cache并不冲突,也不重复。重现明天给。睡了睡了~~

zombieJ commented 6 years ago

辛苦了~

TotooriaHyperion commented 6 years ago

@zombieJ bug重现: https://github.com/TotooriaHyperion/rc-form-bug

zombieJ commented 6 years ago

@TotooriaHyperion , npm start 显示 ‘Cannot GET /’,是不是还需要其他操作?

TotooriaHyperion commented 6 years ago

@TotooriaHyperion , npm start 显示 ‘Cannot GET /’,是不是还需要其他操作?

/rc-form-bug.html

zombieJ commented 6 years ago

Add online reproduce: https://codesandbox.io/s/pwr5z2qv4q

harshil-shipmnts commented 6 years ago

I too am facing the same bug. We are using shouldComponentUpdate to optimize form fields rendering. So we are losing the values for the fields which are not rendered.