SSR下braft-editor的异步加载、新建和更新的初始化逻辑

前言

最近在写表单相关的组件，富文本编辑器作为基础FieldItem，需要接入到表单FormField，所以状态这里并不是自己去维护了。
然而由于我们使用的富文本编辑器是BRAFT EDITOR，对react受控组件的支持并不是很好，所以在其原有的基础下进行了改造。

效果

核心代码

1. 组件处

enum EditModemEnum {
  Add = 0, // 新增
  Edit = 1 // 编辑
}

export type Props = {
  value?: string;
  onChange?(value: string): void;
  editMode: 1 | 0; // 1 编辑  0 新建
};

const RichEditor = (props: Props) => {
  const {
    value,
    editMode
  } = props;

  const [flag, setFlag] = useState(false);

  const [braftEditorState, setBraftEditorState] = useState<any>(null);
  const [BraftEditor, setBraftEditor] = useState<any>(null);

  const count = useMemo(() => {
    if (!braftEditorState) {
      return 0;
    } else {
      const braftEditorHtml = braftEditorState.toHTML();
      const noTagContent = braftEditorHtml.replace(/<\/?.+?>/g, '');
      const formatLength = noTagContent?.replace(/[^\x00-\xff]/g, '01').length;

      return formatLength;
    }
  }, [braftEditorState]);

  useEffect(() => {
    import('braft-editor').then((res) => {
      if (res.default) {
        setBraftEditor(res);

        // 无论怎样需要执行一次
        setBraftEditorState(res.default.createEditorState(null));
      }
    });
  }, []);

  useEffect(() => {
    if (flag) {
      return;
    }

    if (BraftEditor && BraftEditor.default && editMode === EditModemEnum.Edit) {
      const newEditorState = BraftEditor.default.createEditorState(value);

      // 无论值传递多少次，只执行一次结束
      // 本身为空，则不处理，等待下一次onChange后，导致value传递一次，再结束
      // 一旦value不为空，拿到值后，将flag反转
      if (!newEditorState.isEmpty()) {
        setBraftEditorState(newEditorState);
        setFlag(true);
      }
    }
  }, [value, BraftEditor]);

  const handleChange = useCallback((editorState: EditorState) => {
    if (editorState.isEmpty()) {
      return;
    }

    setBraftEditorState(editorState);

    const newValue = editorState.toHTML();

    props.onChange?.(newValue);
  }, []);

  return (
    <BraftEditor
          value={braftEditorState}
          onChange={handleChange}
        />
  );
};

export default RichEditor;

2. 调用处

<RichEditor
  editMode={isAddMode ? 0 : 1}
></RichEditor>

思考

在很多开发过程中，怎么解决状态维护，状态反转，这种其实是分场合去使用的，因为用的好的情况下，逻辑不会有错误，但是如果存在多变的场景下，要谨慎使用。

结束语

码字不易，觉得有用的话还请点个赞哦！