重新呈现表单后，React Form数据在慢速网络上丢失

Question

我在react Component上有一个表单。 当我在chrome上加载Slow 3G网络上的react应用程序时，由于bundle大小为1MB，加载bundle需要2-3分钟，但是在bundle加载之前加载了表单。

因此，如果我们在表单上输入任何详细信息，一旦加载包并重新呈现表单，它们就会丢失。

是否可以使用之前输入的详细信息填写表单。

Answer 1

此问题有多种方法：

1. 使用延迟加载，将代码拆分为多个捆绑包。此功能已准备好在create-react-app中使用。我附上了一个代码示例here。
2. 在onblur事件中，尝试将值保存在本地存储空间中（例如：localStorage.setItem('input', value)）。但是，由于捆绑文件不完整，因此无法保证正常工作。要克服这个问题，最好首先拆分捆绑。并尝试将其保存在组件内，而不是在Redux操作中 假设您正在使用Redux，并且输入值使用双向绑定保存在组件的状态中。 （输入不会更新，如果不能更新setState ）
3. 添加加载图标，只允许用户输入数据，直到完全捆绑下载。 （这可能不是最好的解决方案，但绝对是最简单的。）

注意：

• 这个问题实际上可能没有您想象的那么大，因为移动浏览器也可以保存缓存。因此，如果您已经打开了该页面，则可能根本不会下载该软件包。
• 开发构建也比 Production 构建更大，因为额外的source-map而没有uglify，请确保您使用生产建设。