React Antdesign 性能优化

Question

似乎改变了一个 antd 组件，会触发页面上所有其他组件的重新渲染。 React.PureComponent 不起作用，当您将 antdesign 组件放入其中时 - 它不允许输入文本，因为没有更改状态和道具。

我看到的唯一解决方法是在 shouldComponentUpdate 中添加额外的逻辑，或者使用 onChange 方法为每个字段维护本地状态。

维护所有字段的状态，这让我很头疼。有没有人运行包含许多 antdesign 项目的大型应用程序，以便我至少可以了解何时进行优化？

目前我有大约 60 个 antdesign 组件的表单，在输入时，它会挂起一段时间。

Answer 1

由于没有人回答，我会发布答案，这是我在试验时想出的。 如果需要，使用shouldComponentUpdate 结合本地状态和父状态似乎是可行的方法。

在每个字段上，我都附加了onChange 事件以更改组件的本地状态。然后在shouldComponentUpdate 内部检查 nextState 是否等于当前状态。

如果您还需要根据父状态检查某些内容，请通过 props 传递。

我个人不喜欢这种方法，但想不出更好的方法。 如果您觉得有更好的方法，我会很高兴听到不同的意见。