React的antd的form组件结合redux使用出现onFieldChange触发多次的问题

探讨React结合Antd与Redux框架下,表单元素触发问题及性能瓶颈,分析getFieldProps机制,提出FORM组件状态管理与控件渲染优化建议。

场景: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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值