react页面数据过多怎么办_求助， React 项目开发页面中有大量表单（详见内容），怎么保证性能？或者有什么解决方案？...

技术栈：

react

react-redux

ant.design

问题:

现在项目开发了一个页面，里面全是表单，固定的(input, select)大约有 35 个，还有三大块是动态输入框(就是点击一个按钮，添加一行的表单，一行少的有 3 个，多的有 9 个，有 input,select )

产品要求：

三大块动态表单要支持快捷键，就是按键盘上的+自动增加一行，按-就删除当前行

三大块动态表单中每个都有自动完成的功能，类似于 jqueryui 的 autocomplete 功能

如果是 select 或者自动完成的表单，当选择(选中)一个值后，焦点自动跳转到下一个输入框里

在提交的时候，后台做完校验，如果有错，返回的数据还要解析出来哪些 input 或者 select 有问题，然后给它们加个红框

上面红框提示的同时还要弹一个通知，

还有一些其它的联动操作，比如固定表单中某个 select 值发生了变化，动态表单中有一项 select 也要跟着变之类的

其它固定的 input 和 select 还好说，问题出在动态增加的那三块表单中，其中一行就有 9 个 input (和 select )的表单少的几行，多的几百上千行，这时候性能问题就出来了，经测试，超过 200 行就基本没法填内容了，卡的不要不要的(这是原生 html 组件写的性能) ant.design 加上后，超过 50 行(也就是 450 个 input/select)就卡的没法输入了

因为要绑定快捷键事件，所以对表单中的 input/select 都做了事件绑定( onFocus, onBlur, onChange)，特别是 onChange 事件，因为它对 state 修改了，每次修改 state 页面就会刷新，这也是卡的主要原因

但如果不用 onChange 来做双向数据绑定，那提交的时候，页面上的数据获取就相当的麻烦了

还有全局事件绑定怎么处理比较好，因为三大块动态表单都用的是一个快捷键，所以只能在父组件中处理了，这就要在子组件里往父组件反馈，也就是需要用到 onFocus 或者 onBlur 事件

综上，求大神有好的解决方案分享一下，谢谢！