chore: Modify unsafe component lifecycles. #32

Author: jaywcjlove

src/components/CodeMirror/index.tsx

@@ -81,14 +81,6 @@ export default class ReactCodeMirror extends Component<ICodeMirror, ICodeMirrorS
   // public editor!: Doc | Editor | EditorFromTextArea | Editor;
   public constructor(props: Readonly<ICodeMirror>) {
     super(props);
-  }
-  public render() {
-    return (
-      <textarea ref={(instance: HTMLTextAreaElement) => this.textarea = instance} />
-    );
-  }
-
-  public componentWillMount() {
     if (SERVER_RENDERED) {
       return;
     }
@@ -97,6 +89,11 @@ export default class ReactCodeMirror extends Component<ICodeMirror, ICodeMirrorS
       this.props.editorWillMount();
     }
   }
+  public render() {
+    return (
+      <textarea ref={(instance: HTMLTextAreaElement) => this.textarea = instance} />
+    );
+  }
 
   public componentDidMount() {
     if (SERVER_RENDERED) {
@@ -116,10 +113,9 @@ export default class ReactCodeMirror extends Component<ICodeMirror, ICodeMirrorS
 
     this.renderCodeMirror(this.props);
   }
-  public UNSAFE_componentWillReceiveProps(nextPros: ICodeMirror) {
-    if (nextPros.value !== this.props.value || nextPros.width !== this.props.width || nextPros.height !== this.props.height) {
-      this.renderCodeMirror(nextPros);
-    }
+
+  componentDidUpdate() {
+    this.renderCodeMirror(this.props);
   }
 
   public shouldComponentUpdate(nextProps: ICodeMirror, nextState: ICodeMirrorState) {
@@ -128,7 +124,7 @@ export default class ReactCodeMirror extends Component<ICodeMirror, ICodeMirrorS
     || nextProps.height !== this.props.height
     || nextProps.width !== this.props.width;
   }
-  // 将props中所有的事件处理函数映射并保存
+  // 将 props 中所有的事件处理函数映射并保存
   public getEventHandleFromProps(): IEventDict {
     const propNames = Object.keys(this.props);
     const eventHandle = propNames.filter((prop) => {

src/components/PreviewMarkdown/index.tsx

@@ -50,11 +50,18 @@ export default class PreviewMarkdown extends React.Component<IPreviewMarkdown, I
   public hide() {
     this.setState({ visible: false });
   }
-
-  public componentWillReceiveProps(nextProps: IPreviewMarkdown) {
-    if (nextProps.visible !== this.props.visible) {
-      this.setState({ visible: nextProps.visible });
+  static getDerivedStateFromProps(props: IPreviewMarkdown, state: IPreviewMarkdownState) {
+    if (props.value !== state.value) {
+      return {
+        value: props.value
+      }
+    }
+    if (props.visible !== state.visible) {
+      return {
+        visible: props.visible
+      }
     }
+    return null;
   }
 
   public highlight() {

src/index.tsx

@@ -49,7 +49,7 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditor,
                 visibleEditor={visibleEditor}
                 ref={this.getInstance}
                 {...codemirrorProps}
-                onChange={this.onChange}
+                onChange={this.onChange.bind(this)}
               />
             )}
             <PreviewMarkdown
@@ -84,12 +84,9 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditor,
       this.setEditorSize(isFullScreen);
     }
   }
-
-  public componentWillReceiveProps(nextProps: IMarkdownEditor) {
-    if (nextProps.visible !== this.props.visible) {
-      nextProps.visible ? this.preview.show() : this.preview.hide();
-      this.CodeMirror.editor.setSize(nextProps.visible ? '50%' : '100%');
-    }
+  public componentDidUpdate() {
+    this.props.visible ? this.preview.show() : this.preview.hide();
+    this.CodeMirror.editor.setSize(this.props.visible ? '50%' : '100%');
   }
 
   public getInstance = (editor: CodeMirror) => {
@@ -100,9 +97,6 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditor,
   private onChange = (editor: IInstance, data: CodeMirror.EditorChange, value: string) => {
     const { onChange } = this.props as IMarkdownEditor;
     if (onChange) {
-      if (this.preview) {
-        this.preview.updateSource(editor.getValue());
-      }
       onChange(editor, data, editor.getValue());
     }
   }

website/App.tsx

@@ -12,13 +12,17 @@ const DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '').re
 
 interface IAppState {
   mdstr: string;
+  visible: boolean;
 }
 
+let count = 1;
+
 export default class App extends React.Component<any, IAppState> {
   constructor(props: any) {
     super(props);
     this.state = {
       mdstr: DocumentStrSource,
+      visible: true,
     }
   }
   public render() {
@@ -29,7 +33,15 @@ export default class App extends React.Component<any, IAppState> {
           <Logo />
         </div>
         <div className={styles.editor}>
+          <button onClick={() => {
+            count += 1;
+            this.setState({ mdstr: `String ${count}` });
+          }}>Modify Markdown</button>
+          <button onClick={() => {
+            this.setState({ visible: !this.state.visible })
+          }}>{this.state.visible ? 'Show' : 'Hide'}</button>
           <MarkdownEditor
+            visible={this.state.visible}
             options={{
               autofocus: true,
               showCursorWhenSelecting: true,