React Quill重渲染时消失，添加图片上传handler后触发该问题

问题根源 #

每次组件重渲染时，你定义的modules对象都会被重新创建一个新的引用——哪怕imageHandler用了useCallback缓存，但整个modules的内存地址发生了变化。React Quill组件会把modules的变化识别为「需要完全重建编辑器实例」，旧编辑器被销毁后，新实例初始化前就会出现编辑器「消失」的现象。

你之前给组件加唯一key没用，因为key是用来管理列表中组件的复用逻辑，这里是单个组件的props引用变化触发的重建，key解决不了这个问题。

修复方案 #

用useMemo把modules整个缓存起来，只有当它的依赖项（也就是imageHandler）变化时才重新生成：

const modules = useMemo(() => ({
  toolbar: {
    container: [
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      ["bold", "italic", "underline", "strike", "blockquote"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["link", "image"],
      ["code-block"],
      [
        {
          color: ["#000000", ...],
        },
        {
          background: ["#000000", ...],
        },
      ],
      ["clean"],
    ],
    handlers: {
      image: imageHandler,
    },
  },
  clipboard: {
    matchVisual: false,
  },
}), [imageHandler]);

这样modules的引用在imageHandler不变的情况下会保持稳定，React Quill就不会频繁销毁重建编辑器了。

内容的提问来源于stack exchange，提问作者ksquare