如何在不挂起我的UI的情况下在React-Redux中实时发送数据？

Question

我是react-redux的新手。

场景：我有一个包含大量文字字段的表单。当我在字段中输入值时，将执行以下过程：

字段值 =＆gt; socket.emit数据 =＆gt; socket.on =＆gt; 行动 =＆gt; 还原状态更新 =＆gt; ui updates

没有保存按钮。

问题是，我觉得在redux状态下更新单个值是一个很长的周期。

当UI重新渲染（作为redux更新）时，表单会挂起2-3秒。因此，我无法在此时间间隔内的其他字段中输入值。

在发送实时数据时，是否有简短的方法或优化来更新我的UI？

Answer 1

如果不查看代码，就很难建议确切的更改。但即便如此，也是如此。

1. 使用state存储即时更改：所有文本字段都应绑定到state字段（json对象），该字段将由每个onChange处理程序更新文本框。此state字段应接收传递给表单的props的初始表单数据。
2. 将state字段与初始数据进行比较，以确定是否发生了更改：将state字段与作为props传递的初始数据进行比较，以确定是否发生了任何更改。
3. 延迟调用以更新redux状态：当debounce字段和{{state字段时，使用像lo-dash的props这样的函数以设置的间隔或页面导航事件更新redux状态1}}初始状态不同。

这会将您的UI从不必要的重新渲染中保存下来，并希望在您冻结UI时解决问题。希望这有帮助！

Answer 2

商定;我会在这里采取乐观的方法，并在组件状态或应用程序状态下本地存储突变。

如果您的传入道具没有深入嵌套，您还可以使用React.PureComponent，它对nextProps与currentProps进行浅层比较，以确定是否需要重新渲染。