marked + highlight.js 引发的卡顿2-防抖方

上一篇文章中通过指定语法类型，来避免大量查询

highlight: function (code) {
        return hljs.highlight('javascript', code).value;
 }

但其实存在很多限制
1.不清楚后续会出现什么语法，每次一出现又要添加语法

2. 希望还是可以自动识别语法，一劳永逸

所以想了个防抖方案
过程

1. 尝试把hljs.highlightAuto防抖了，但是失败了，因为这个是同步的函数，防抖无法得到返回值
2. 在marked.setOptions的时候把 highlight给防抖了，尝试后发现参数没有更新，永远都少一步，得到的输入值永远都是上一步的值

3.对MdEditor的renderHTML传入的函数进行防抖，也失败了，因为react视图需要实时更新，也需要一个返回值

4.改造MdEditor的renderHTML方法，使之支持防抖，
代码地址
https://github.com/HarryChen0506/react-markdown-editor-lite/blob/master/src/editor/index.tsx

image.png
从代码中可以得知，他自己的renderHTML是同步调用的，而外界传入的renderHTML，要么是同步的，要么是个promise，也没有便捷的防抖参数

另外写一个类去继承，然后改造renderHTML方法，让其自动防抖

import MdEditor from 'react-markdown-editor-lite';
export default class extends MdEditor {
    renderHTML = debounce(super.renderHTML, 300);
}

然后用组件直接用这个即可