上一篇文章中通过指定语法类型,来避免大量查询
highlight: function (code) {
return hljs.highlight('javascript', code).value;
}
但其实存在很多限制
1.不清楚后续会出现什么语法,每次一出现又要添加语法
- 希望还是可以自动识别语法,一劳永逸
所以想了个防抖方案
过程
- 尝试把hljs.highlightAuto防抖了,但是失败了,因为这个是同步的函数,防抖无法得到返回值
- 在marked.setOptions的时候把 highlight给防抖了,尝试后发现参数没有更新,永远都少一步,得到的输入值永远都是上一步的值
3.对MdEditor的renderHTML传入的函数进行防抖,也失败了,因为react视图需要实时更新,也需要一个返回值
4.改造MdEditor的renderHTML方法,使之支持防抖,
代码地址
https://github.com/HarryChen0506/react-markdown-editor-lite/blob/master/src/editor/index.tsx

从代码中可以得知,他自己的renderHTML是同步调用的,而外界传入的renderHTML,要么是同步的,要么是个promise,也没有便捷的防抖参数
另外写一个类去继承,然后改造renderHTML方法,让其自动防抖
import MdEditor from 'react-markdown-editor-lite';
export default class extends MdEditor {
renderHTML = debounce(super.renderHTML, 300);
}
然后用组件直接用这个即可
网友评论