react

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

@@ -3,7 +3,9 @@ import './App.css';
 import LearnUseState from './components/LearnUseState';
 import LearnUseEffect from './components/LearnUseEffect';
 import LearnUseRef from './components/LearnUseRef';
+import LearnUseCallBack from './components/LearnUseCallBack';
 import LearnUseMemo from './components/LearnUseMemo';
+import TestComponent from  './components/TestComponent';
 function App() {
   let [show, isShow] = useState(true);
   let [open, isOpen] = useState(true);
@@ -20,6 +22,8 @@ function App() {
         }
       </div>
         <LearnUseMemo></LearnUseMemo>
+        <LearnUseCallBack></LearnUseCallBack>
+        <TestComponent></TestComponent>
     </div>
   );
 }

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

@@ -0,0 +1,32 @@
+import { useCallback,useState } from "react";
+/**
+ * 
+ * @returns 
+ * useCallback
+ * useCallback 是一个允许你在多次渲染中缓存函数的 React Hook。
+ * const cachedFn = useCallback(fn, dependencies)
+ */
+function NewsMain({newList}) {
+    return (
+        <div>
+            <button type="button" onClick={newList}>修改名字</button>
+        </div>
+    )
+}
+function LearnUseCallBack() {
+    const [name,setName] = useState("蜡笔小新");
+    const [age,setAge] = useState(3);
+    const changeAge = useCallback(()=> {
+        setAge(age+2);
+    },[])
+    const changeName =  useCallback(()=> {
+        setName("小明");
+    },[])
+    return <div>
+        <h1>我叫{name},今年{age}岁</h1>
+        <button onClick={changeAge}>修改</button>
+        <NewsMain newList={changeName}></NewsMain>
+    </div>
+}
+
+export default LearnUseCallBack;

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

@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect } from 'react';
-import './useRef.css'
+// import './useRef.css'
 function LearnUseRef() {
     let [time, setTime] = useState(new Date());
     // let [timer,setTimer] = useState(null)

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

@@ -0,0 +1,40 @@
+import { useState, useCallback, memo } from "react";
+import './test.css';
+/**
+ * memo
+ * memo 允许你的组件在 props 没有改变的情况下跳过重新渲染。
+ * const MemoizedComponent = memo(SomeComponent, arePropsEqual?)
+ */
+const Child = memo(({ btnName, aa }) => {
+    console.log(`子组件${btnName}渲染了`);
+    return <button onClick={aa}>{btnName}</button>
+})
+const Child1 = memo(({ btnName1, aa1 }) => {
+    console.log("执行")
+    // console.log(`子组件${btnName1}渲染了`);
+    return <button onClick={aa1}>{btnName1}</button>
+})
+
+function TestComponent() {
+    const [count, setCount] = useState(1);
+    const [text,sestText] = useState("测试");
+    // 缓存
+    const handleBtn1 = useCallback(() => {
+        console.log("哈哈")
+        setCount(prev => prev + 1)
+    }, [])
+    // 不缓存
+    function handleBtn2() {
+        console.log("你好")
+        setCount(prev => prev + 3)
+    }
+    return (
+        <div className="box1">
+            <h3>初始值：{count}</h3>
+            <h3>文本:{text}</h3>
+            {/* <Child1 aa1={handleBtn1} btnName1="点击加一(缓存函数)" /> */}
+            <Child aa={handleBtn2} btnName="点击加一(不缓存缓存函数)" />
+        </div>
+    )
+}
+export default TestComponent;

19.React/高阶/project1/src/components/test.css

@@ -0,0 +1,5 @@
+.box1 {
+    width: 300px;
+    height: 300px;
+    border: 2px solid #00f;
+}

19.React/高阶/project1/src/components/useRef.css

@@ -2,11 +2,11 @@
     width: 300px;
     height: 200px;
     border: 2px solid #f00;
-    /* position: absolute;
+    position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -100px;
-    margin-left: -150px; */
+    margin-left: -150px;
     /* display: table-cell;
     vertical-align: middle;
     text-align: left; */
@@ -14,6 +14,6 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%); */
-    position: absolute;
-    transform: translateX(150px) translateY(100px);
+    /* position: absolute;
+    transform: translateX(150px) translateY(100px); */
 }