study4

react/study4/project/src/App.js

@@ -6,6 +6,7 @@ import TestUseState from './components/useState'
 import Count from './components/Count'
 import Test from './components/useEffect'
 import Clock from './components/Clock'
+import TestUseCallBack from './components/useCallBack'
 import Word from './components/useMemo'
 function App() {
   return (
@@ -15,9 +16,10 @@ function App() {
         <Table/> */}
         {/* <TestUseState/> */}
         {/* <Count/> */}
-        {/* <Test/> */}
+        <Test/>
         {/* <Clock/> */}
-        <Word/>
+        {/* <Word/> */}
+        <TestUseCallBack/>
       </header>
     </div>
   );

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

@@ -7,7 +7,9 @@ export default function Clock({ title = "北京时间" }) {
       setNow(new Date());
     }, 1000);
 
-    // return clearInterval(timer);
+    return ()=>{
+        clearInterval(timer)
+    };
   }, []);
 
   return (

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

@@ -0,0 +1,33 @@
+//useCallBack 做缓存 缓存一个函数
+import { useCallback,useState,useEffect } from "react";
+
+// props中自带一个children属性 在React中
+function Main({children,onClick}) {
+    // 副作用
+    useEffect(()=>{
+        console.log("发生改变")
+    })
+
+    return(
+        <button onClick={onClick}>{children}</button>
+    )
+}
+
+
+
+export default function TestUseCallBack() {
+    let [word,setWord] = useState("一个普通文本");
+    
+    // function handleClick(){
+    //     setWord("这是一个新文本1")
+    //     console.log("点击了")
+    // }
+    const handleClick = useCallback(()=>{setWord("这是一个新文本")},[])
+
+    return(
+        <div>
+            <p>{word}</p>
+            <Main onClick={handleClick}>修改内容</Main>
+        </div>
+    )
+}

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

@@ -21,10 +21,10 @@ function MainItem({name,age}) {
 function Test({name=''}) {
     let [msg, setMsg] = useState("这是一个关键信息")
     // 1.每次组件渲染时 调用 执行一些副作用代码
-    // useEffect(()=>{
-    //     // 编写副作用代码
-    //     console.log("展示副作用")
-    // })
+    useEffect(()=>{
+        // 编写副作用代码
+        console.log("展示副作用")
+    })
     // 2.代表生命周期componentDidMount 挂载前
     // useEffect(()=>{
     //     console.log("组件渲染")