docs: update

Author: MuYunyun

README.md

@@ -57,7 +57,8 @@ Render Props:
 * React Hooks 的常见陷阱
   * 闭包陷阱, (useInterval, useFetch)
 
-### React Hooks 使用中的问题
+###
+React Hooks 使用中的问题
 
 #### 百思不解, 必是闭包
 

src/index.js

@@ -1,83 +1,18 @@
-import React, { useState, useRef, useEffect, useReducer } from "react"
+import React from "react"
 import ReactDOM from "react-dom"
+import { HookApp, ClassApp } from './tasks/task1'
+import { Demo } from './tasks/task2'
 import useInterval from './useInterval'
 import "./styles.css"
 
-function HookApp() {
-  const [count, setCount] = useState(0)
-  const handleAdd = () => {
-    setCount(count + 1)
-  }
-  const handleAlert = () => {
-    setTimeout(() => {
-      window.alert(count)
-    }, 2000)
-  }
-  return (
-    <div className="App">
-      <h1>Hook</h1>
-      <h1>{count}</h1>
-      <button onClick={handleAdd}>add</button>
-      <button onClick={handleAlert}>alert</button>
-    </div>
-  )
-}
-
-class ClassApp extends React.Component {
-  state = {
-    count: 0
-  };
-
-  handleAdd = () => {
-    this.setState({
-      count: this.state.count + 1
-    });
-  };
-
-  handleAlert = () => {
-    setTimeout(() => {
-      window.alert(this.state.count);
-    }, 2000);
-  };
-
-  render() {
-    return (
-      <div className="App">
-        <h1>Class</h1>
-        <h1>{this.state.count}</h1>
-        <button onClick={this.handleAdd}>add</button>
-        <button onClick={this.handleAlert}>alert</button>
-      </div>
-    );
-  }
-}
-
-/* --------------- 分割线 --------------- */
-
-function Demo() {
-  const [count, setCount] = React.useState(0)
-
-  useEffect(() => {
-    const id = setInterval(() => {
-      setCount(count + 1)
-    }, 2000)
-
-    return () => {
-      clearInterval(id)
-    }
-  }, [])
-
-  return <div>Count: {count}</div>
-}
-
 function View() {
   return (
     <React.Fragment>
-      <HookApp />
+      {/* <HookApp />
       <hr />
       <ClassApp />
-      <hr />
-      {/* <Demo /> */}
+      <hr /> */}
+      <Demo />
     </React.Fragment>
   );
 }

src/tasks/task1.js

@@ -0,0 +1,52 @@
+import React from "react"
+
+const { useState } = React
+
+export function HookApp() {
+  const [count, setCount] = useState(0)
+  const handleAdd = () => {
+    setCount(count + 1)
+  }
+  const handleAlert = () => {
+    setTimeout(() => {
+      window.alert(count)
+    }, 2000)
+  }
+  return (
+    <div className="App">
+      <h1>Hook</h1>
+      <h1>{count}</h1>
+      <button onClick={handleAdd}>add</button>
+      <button onClick={handleAlert}>alert</button>
+    </div>
+  )
+}
+
+export class ClassApp extends React.Component {
+  state = {
+    count: 0
+  };
+
+  handleAdd = () => {
+    this.setState({
+      count: this.state.count + 1
+    });
+  };
+
+  handleAlert = () => {
+    setTimeout(() => {
+      window.alert(this.state.count);
+    }, 2000);
+  };
+
+  render() {
+    return (
+      <div className="App">
+        <h1>Class</h1>
+        <h1>{this.state.count}</h1>
+        <button onClick={this.handleAdd}>add</button>
+        <button onClick={this.handleAlert}>alert</button>
+      </div>
+    );
+  }
+}

src/tasks/task2.js

@@ -0,0 +1,21 @@
+import React from "react"
+
+const { useState, useEffect } = React
+
+function Demo() {
+  const [count, setCount] = React.useState(0)
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCount(count + 1)
+    }, 2000)
+
+    return () => {
+      clearInterval(id)
+    }
+  }, [])
+
+  return <div>Count: {count}</div>
+}
+
+export { Demo }