React 中监听并存储表单内存问题

在 React 中，可变的数据往往存放在 state 中
这种存储方式可以应对大部分情况，但是在某些特殊情况下会导致问题

起因

在编辑博客时，浏览器不断报错，提示out of memory，搜了下并没有发现有类似的讨论
使用调试工具看了下内存占用，发现随便打几个字轻轻松松就超过 3G。
虽然 Chrome 以耗费内存著称，但是没道理打几个字就占用 3 个G，所以针对整个问题，进行了各种测试。

确定问题

首先，这个问题在之前的博客上是不存在的，基本上可以确定问题出在 Monaco Editor 上
所以单独把 Monaco Editor 拉出来建项目测试，发现输入并没有什么问题。而且使用的框架 Demo 测试也没有问题

而本地跑博客的后端依旧爆炸，那么怀疑和博客本身的某个东西有问题。
自然而言要怀疑的对象是是 Ant Design 的 Form，但是去看了下代码，并没有发现有什么问题

那么要找到问题的原因，就要先稳定重现

在 CodeSandbox 上经过各种测试，可以发现如下问题：

1. 编辑框内容很长时才会出现内存飙升（体现为打一个字多几十兆）
2. 当内存飙升时，打字开始卡顿（但是电脑本身并未卡顿）
3. 打中文比打英文更容易出问题
4. 复制粘贴大文本没问题，只有打字会有问题

那么就可以稳定重现了：生成 2w 个中文，然后打中文进去

接着，开始删东西，确定是哪些组件的问题。当删去Form.Item时，可以看到内存不再飙升，那么真的是Form的问题么？
要控制变量确定这一问题，就要实现一个类似功能的东西。虽然 Ant Design 的 From 很复杂，但是涉及和编辑框交互的只有监听内容的部分。那么就监听onChange存下来，看看有没有问题

测试发现，仅仅是无脑onChange={value=>this.setState({value})}，就可以稳定触发
那么就可以确定就是监听这里有问题了

再进一步测试使用防抖函数，确保每一秒只存入 state 一次
结果与预期一样，毫无问题

原因猜想

首先大文本存储肯定是需要时间的，由于存储时不是增量存储，所以相当于每次都要全量写入所有文本
而中文比英文触发快的原因是：在打字时，如果要打中文，输入框内会先出现对应的拼音（以及分隔符），再算上最后确认中文后又快速把拼音编程中文，一秒钟完全可以触发十几次onChange，相对于英文触发的更多

看起来一切都理所当然，本身就不应该监听并存储大数据。
但是测试过程中并不是那么直觉，比如最开始提到的：老版本的 TextArea 并没有这种问题出现，因此更容易将问题定向到 Monaco Editor 本身，而非使用的方式。
（而且一篇博客最多也就几万字，那么多编辑器都没事）

解决方案

解决方案其实前面也已经提到过了，要监听变化就加一个防抖，给浏览器足够的处理时间
要获取内容只在最后获取，而非中间保持数据同步

重现 demo