chore: Handle UNSAFE_componentWillReceiveProps worning. #25

Author: jaywcjlove

src/index.tsx

@@ -48,17 +48,13 @@ export default class MarkdownPreview extends Component<IMarkdownPreviewProps, IM
   componentDidMount() {
     this.highlight();
   }
-  UNSAFE_componentWillReceiveProps(nextProps: IMarkdownPreviewProps) {
-    if (nextProps.source !== this.props.source) {
-      this.setState({ value: nextProps.source }, () => {
+  componentDidUpdate(prevProps: IMarkdownPreviewProps) {
+    if (this.props.source !== prevProps.source) {
+      this.setState({ value: this.props.source }, () => {
         this.highlight();
       });
     }
   }
-  public shouldComponentUpdate(nextProps: IMarkdownPreviewProps, nextState: IMarkdownPreviewState) {
-    return nextProps.source !== this.props.source
-      || nextState.value !== this.state.value;
-  }
   public renderHTML(mdStr?: string) {
     this.setState({ value: mdStr }, () => {
       this.highlight();

website/App.tsx

@@ -7,6 +7,8 @@ import './App.css';
 import MarkdownPreview from '../';
 import MDStr from '../README.md';
 
+let val = 1;
+
 export default () => {
   const [value, setValue] = useState('');
   return (
@@ -21,6 +23,9 @@ export default () => {
           React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style.
         </p>
       </header>
+      <button onClick={() => {
+        setValue('# 333' + val++)
+      }}>set value</button>
       <div className="App-editor">
         <textarea
           placeholder="Please enter the Markdown code!"