react

19.React/高阶/project1/src/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import LearnUseState from './components/LearnUseState';
 import LearnUseEffect from './components/LearnUseEffect';
 import LearnUseRef from './components/LearnUseRef';
+import LearnUseMemo from './components/LearnUseMemo';
 function App() {
   let [show, isShow] = useState(true);
   let [open, isOpen] = useState(true);
@@ -18,7 +19,7 @@ function App() {
           open ? <LearnUseRef></LearnUseRef> : <div>已卸载</div>
         }
       </div>
-
+        <LearnUseMemo></LearnUseMemo>
     </div>
   );
 }

19.React/高阶/project1/src/components/LearnUseMemo.jsx

@@ -0,0 +1,27 @@
+
+/**
+ * 
+ * @returns 
+ * useMemo
+ * useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。
+ * const cachedValue = useMemo(calculateValue, dependencies)
+ * 1.提高开发性能
+ * 2.不适用于大量的计算内容  不适用于频繁地数据变化
+ * 3.缓存值
+ */
+import { useState, useMemo } from "react";
+function LearnUseMemo() {
+    let [num, setNum] = useState(10);
+    const doubleNum = useMemo(() => {
+        return num * 2;
+    },[num])
+    return <div>
+        <h2>初始值:{num}</h2>
+        <h1>双倍:{doubleNum}</h1>
+        <button onClick={() => {
+            setNum((prevState)=> prevState+1)
+        }}>加一</button>
+    </div>
+}
+
+export default LearnUseMemo;

19.React/高阶/project1/src/components/LearnUseRef.jsx

@@ -5,11 +5,11 @@ function LearnUseRef() {
     // let [timer,setTimer] = useState(null)
     let timer = useRef(null); 
     // {current:xxx}
-    console.log(timer.current,'初始化')
+    // console.log(timer.current,'初始化')
     useEffect(() => {
         timer.current = setInterval(() => {
             setTime(new Date())
-            console.log(timer.current,'更新')
+            // console.log(timer.current,'更新')
         }, 1000)
     }, [])
     function handleStop() {