React 功能组件卸载

Question

我想重写这个组件https://github。 com/josdejong/jsoneditor/blob/master/examples/react_advanced_demo/src/JSONEditorReact.js 到一个功能组件。 我做了这个：

const Editor = ({json, mode, onChange}) => {
  const elRef = useRef(null);

  useEffect(() => {
    const options = {
      onChangeText: onChange,
      onChangeJson: onChange,
    };

    const jsonEditor = new JSONEditor(elRef.current, options);
    if (jsonEditor) {
      if (json) {
        jsonEditor.set(json);
      }

      if (mode) {
        jsonEditor.setMode(mode);
      }
    }

    return () => {
      if (jsonEditor) {
        jsonEditor.destroy();
      }
    }
  },[json,mode]);
  
  return (
    <div
      className={styles.jsoneditor_react_container}
      ref={elRef}
    />
  )
}

export default Editor;

我的问题是：使用 [json, mode] 依赖项卸载 useEffect 中的组件 jsonEditor.destroy(); 是否正确，或者我应该使用空依赖项数组创建另一个 useEffect 以获得相同的行为就像在类组件中一样？

Answer 1

只要销毁和重建 JSONEditor 不会花费明显的时间或导致用户明显的视觉抽搐，您所做的就很好。卸载组件时，编辑器将被清理。

但是，因为它似乎允许您在现有实例上更改模式和 JSON（基于 API），我想我会这样做，而不是完全销毁它并在这些变化时重建它：

const Editor = ({json, mode, onChange}) => {
  const elRef = useRef(null);
  const edRef = useRef(null);

  useEffect(() => {
    // On mount
    const options = {
      onChangeText: onChange,
      onChangeJson: onChange,
    };

    const jsonEditor = edRef.current = new JSONEditor(elRef.current, options);
    if (json) {                 //
      jsonEditor.set(json);     // I don't think you actually need these here,
    }                           // I *think* `useEffect` callbacks are run in
    if (mode) {                 // order so the below will do it. But...
      jsonEditor.setMode(mode); //
    }                           //

    return () => {
      // No `if`, you *know* it exists
      jsonEditor.destroy();
      edRef.current = null;
    }
  }, []);

  useEffect(() => {
    const jsonEditor = edRef.current;
    if (!jsonEditor) { // I don't think this can happen
      return;
    }
    if (json) {
      jsonEditor.set(json);
    }
    if (mode) {
      jsonEditor.setMode(mode);
    }
  }, [json, mode]);
  
  return (
    <div
      className={styles.jsoneditor_react_container}
      ref={elRef}
    />
  );
};

export default Editor;

但这更复杂，所以如果你正在做的事情运作良好并提供您想要的用户体验，您可能不想管它。