javascript - 重新渲染表单后，React 表单数据在慢速网络上丢失

Question

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

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

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

Answer 1

解决这个问题有多种方法:

1. 使用延迟加载，将您的代码分成多个包。此功能可以在 create-react-app 中使用。我附上了代码示例here .
2. 在 onblur 事件中，尝试将值保存在本地存储中(例如:localStorage.setItem('input', value)) 。然而，由于捆绑文件不完整，这并不能保证有效。为了克服这个问题，最好先拆分 bundle 。并尝试将其保存在组件中而不是 Redux 操作中。
   假设您使用 Redux，并且输入值通过 2 路绑定(bind)保存在组件的状态中。 (输入不会更新，如果这样就无法setState)
3. 添加加载图标，仅允许用户输入数据，直到 bundle 完全下载。 (这可能不是最好的解决方案，但绝对是最简单的。)

注意:

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