study4

react/study4/project/src/App.js

@@ -5,6 +5,8 @@ import Table from './components/Table'
 import TestUseState from './components/useState'
 import Count from './components/Count'
 import Test from './components/useEffect'
+import Clock from './components/Clock'
+import Word from './components/useMemo'
 function App() {
   return (
     <div className="App">
@@ -13,7 +15,9 @@ function App() {
         <Table/> */}
         {/* <TestUseState/> */}
         {/* <Count/> */}
-        <Test/>
+        {/* <Test/> */}
+        {/* <Clock/> */}
+        <Word/>
       </header>
     </div>
   );

react/study4/project/src/components/Clock.jsx

@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react";
+export default function Clock({ title = "北京时间" }) {
+  let [now, setNow] = useState(new Date());
+  useEffect(() => {
+    let timer;
+    timer = setInterval(() => {
+      setNow(new Date());
+    }, 1000);
+
+    // return clearInterval(timer);
+  }, []);
+
+  return (
+    <div>
+      <p>
+        {title || "当前时间"}:{now.toLocaleString()}
+      </p>
+    </div>
+  );
+}

react/study4/project/src/components/useMemo.jsx

@@ -0,0 +1,9 @@
+import { useMemo, useState } from "react";
+export default function Test() {
+  let [demo, setDemo] = useState(10);
+  // useMemo类似于计算属性 缓存功效
+  // 一定要判断场景 使用useMemo
+  // let newWord = demo *2
+  let newWord = useMemo(() => demo * 2, [demo]);
+  return <div>{newWord}</div>;
+}