场景:react+antd+redux项目,在使用表单时,无表单验证的表单元素change只触发一次,而有表单验证的表单元素会触发两次(有些是多次)
问题原因(待商榷):
以下为截取的部分解释:
应该是getFieldProps 出的问题,我觉得有两个问题
1、使用getFieldProps ,组件在有输入操作时其父页面整个都要render()应该是FORM组件维护了个内部state 任何getFieldProps 的组件输入操作都会更新state整个页面导致刷新。
2、各个包含getFieldProps组件在父页面刷新时其也同时刷新,所以页面内组件一多就卡。
node_modules\react\lib\ReactComponentWithPureRenderMixin.js里的
shouldComponentUpdate: function (nextProps, nextState) {
return shallowCompare(this, nextProps, nextState);
}
(可以加个断点就可以看出),并且getFieldProps内部不知道做了哪些内容,其非纯函数,导致shallowCompare为true必须刷新。而不包含getFieldProps的组件自己写onchange事件就不会有这个问题。
以上两点导致性能问题。
建议能否:
1、针对第一个问题, FORM内维护state给个回调接口,缺省自动更新,也可设置为自己决定更新时机。
2、对第二个问题,优化各个控件,在外部prop没有变化时不进行render。getFieldProps纯函数实现。
完整的讨论请点击Form 组件结合类似 Redux 等框架,外部 store 存储 fields 。修改会重复触发 onFieldsChange