react

20.react/高阶/my-app/src/App.js

@@ -1,13 +1,17 @@
 import LearnUseState from "./components/LearnUseState";
 import LearnUseEffect from "./components/LearnUseEffect";
-import { useState } from "react";
 import LearnUseRef from "./components/LearnUseRef";
+import LearnUseMemo from './components/LearnUseMemo';
+import LearnUseCallBack from "./components/LearnUseCallBack";
+import { useState } from "react";
 function App() {
   const [show, setShow] = useState(true)
   return show ? ( <div>
       <LearnUseState></LearnUseState>
       <LearnUseEffect></LearnUseEffect>
       <LearnUseRef></LearnUseRef>
+      <LearnUseMemo></LearnUseMemo>
+      <LearnUseCallBack></LearnUseCallBack>
     </div>) : (
     <div>
       <LearnUseState></LearnUseState>

20.react/高阶/my-app/src/components/LearnUseCallBack.jsx

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from "react";
+
+
+function MyButton({onClick}) {
+    return <button onClick={onClick}>点击</button>
+}
+
+function LearnUseCallBack() {
+    const [num,setNum] = useState(0);
+    /**
+     * useCallback 
+     * 是一个允许你在多次渲染中缓存函数
+     */
+    useEffect(()=>{
+        document.title =  `点击了${num}次`
+    },[num])
+//    function handleClick(){
+//         console.log("点中了")
+//         setNum((prevState)=>prevState+1)
+//     }
+
+const handleClick = useCallback(()=>{
+ setNum((prevState)=>prevState+1)
+},[])
+
+    return (
+        <div>
+            <h1>useCallback</h1>
+            <MyButton onClick={handleClick}/>
+        </div>
+    )
+}
+export default LearnUseCallBack;

20.react/高阶/my-app/src/components/LearnUseMemo.jsx

@@ -0,0 +1,25 @@
+import { useMemo, useState } from "react";
+
+function LearnUseMemo() {
+    /**
+     * useMemo
+     * 它在每次重新渲染的时候能够缓存计算的结果。
+     * 1.useMemo使用 提升性能
+     * 2.如果依赖频发发生变化 useMemo其实并不提升多少性能 反而会消耗性能
+     * 3.可以在一定计算量下使用useMemo 
+     * 4.在父子组件传参 通过useMemo去缓存子组件传递的数据
+     */
+    const [count,setCount] = useState(0);
+    const doubleCount = useMemo(()=>count *2,[count])
+    return (
+        <div>
+            <h1>useMemo</h1>
+            <p>正常数值:{count}</p>
+            <p>双倍:{doubleCount}</p>
+            <button onClick={()=>{
+                setCount((prevState) => prevState+2)
+            }}>修改数值</button>
+        </div>
+    )
+}
+export default LearnUseMemo;

20.react/高阶/my-app/src/components/LearnUseRef.jsx

@@ -10,7 +10,7 @@ function LearnUseRef() {
     const inpRef = useRef(null);
     // useRef中返回一个对象 {current:缓存值}
     // 缓存值 会在整个函数组件的生命周期内保持不变
-    console.log(timer)
+    // console.log(timer)
     useEffect(()=>{
        timer.current = setInterval(()=>{
             setTime(new Date())
@@ -22,7 +22,7 @@ function LearnUseRef() {
     function stopTime() {
         clearInterval(timer.current)
     }
-    inpRef.current.focus()
+    // inpRef.current.focus()
     return (
         <div>
             <h1>useRef</h1>