关于antd Input 的defaultValue无法重新渲染的问题

最近在开发一个功能，table里面的Input组件。需要单行能够编辑，又要多行一起编辑，如下。

 

 在这种情况下，就只能对Input组件使用value受控，而不能使用defaultValue受控。因为defaultValue受控在批量编辑的时候无效。

现在遇到的问题是，使用value受控，在onChange的时候输入框会有非常明显的卡顿，大概两三秒，甚至无法输入中文，这是不可接受的。究其原因还是以前的人代码写的太烂，model里的state构建的不合理，非常臃肿，嵌套的层级太深，表格的list竟然在第二层。在reducers里面setValue会导致非常大的一个js运算处理消耗。每按一下键盘就会导致js重新运算一次。所以才会出现上面的状况。

测了一下从点击批量设置弹框，到批量设置完成的js运行时间

 js运算需要7秒钟，不卡才怪。

 

处理方法：

1. 在批量设置完后，使用this.forceUpdate强制渲染，不行。

问GPT的答案：

this.forceUpdate() 方法是 React 组件的一个方法，用于强制重新渲染组件。但是，this.forceUpdate() 方法只会重新渲染组件的 render() 方法，而不会重新渲染组件的子组件。

Ant Design 的 Input 组件的 defaultValue 是通过组件的属性传递的，只有在组件的初始渲染时生效。一旦组件初始渲染完成，并且 defaultValue 属性没有发生变化，this.forceUpdate() 方法也无法使输入框重新渲染为新的初始值。

2. 加一个布尔值控制table组件，强制让它渲染

 

这样处理后发现意外丝滑，丝毫感受不到table被切换了。