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

Question

我有一个关于react组件的表单。当我在chrome上的慢速3G网络上加载react应用程序时，由于捆绑包大小为1MB，加载捆绑包需要2-3分钟，但表单在捆绑包加载之前加载。

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

有没有办法用之前输入的详细信息来填写表单？

Answer 1

有多种方法可以解决这个问题：

1. 使用延迟加载，将你的代码分成多个包。此功能已准备好在create-react-app中使用。我附上了一个代码示例here.
2. In onblur事件，尝试将该值保存在本地存储中(例如：localStorage.setItem('input', value))。但是，由于捆绑包文件不完整，这不能保证正常工作。为了克服这个问题，最好先拆分捆绑包。并尝试将其保存在您的组件中，而不是Redux操作中。

假设您正在使用Redux，并且输入值通过双向绑定保存在组件的状态中。(输入将不会更新，如果这不能setState)

• Adding一个加载图标，只允许用户输入数据，直到捆绑下载完成。(这可能不是最好的解决方案，但绝对是最简单的。)

备注：

• 这个问题实际上可能没有你想象的那么大，因为移动浏览器也会保存缓存。因此，如果您已经打开该页面，它可能根本不会下载该捆绑包。由于额外的source-map和没有uglify，
• 开发版本也比生产版本大得多，请确保使用生产版本测试您的应用程序。