react

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

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

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

@@ -0,0 +1,52 @@
+import { use, useEffect, useState } from "react";
+
+function LearnUseEffect() {
+    const [time,setTime] = useState(new Date())
+    const [name,setName] = useState("图图")
+    /***
+     * useEffect 副作用
+     * 函数组件中执行副作用（和渲染无关）
+     * 将一个组件与外部系统同步
+     * 本质 实现一些生命周期
+     */
+    // 第一种：只传入一个函数时，党组件第一次渲染后，或者组件更新后触发 componentDidMount+compontDidUpdate
+    // useEffect(()=>{
+    //     console.log("你好")
+    // })
+    // 第二种：传入两个字段 第一个是回调函数 第二个字段是空数组时，只有组件第一次渲染完成后执行回调，之后不执行 componentDidMount
+    // useEffect(()=>{
+    //     console.log("哈哈")
+    // },[])
+    // 第三种:传入两个字段 第一个是回调函数 第二个是数组，在数组中制定副作用的依赖状态
+    // 当数组第一次渲染后执行，在依赖的数组发生状态变化时 执行  componentDidMount+compontDidUpdate
+    // useEffect(()=>{
+    //     console.log("happy")
+    // },[name,time])
+    // 第四种: 如果传入的回调函数  返回一个函数(fn1) 该函数(fn1)就会在组件卸载前执行
+    let timer;
+    useEffect(()=>{
+        timer = setInterval(()=>{
+            setTime(new Date())
+        },1000)
+        console.log(1)
+        return ()=>{
+            clearInterval(timer); // 清不掉定时器
+            console.log(2)
+        }
+    },[])
+    return (
+        <div>
+            <h1>useEffect</h1>
+            <p>我叫{name}</p>
+            <p>当前时间：{time.toLocaleString()}</p>
+            <button onClick={()=>{
+                setTime(new Date())
+            }}>修改时间</button>
+            <button onClick={() => {
+                setName("哆啦A梦")
+            }}>修改名字</button>
+        </div>
+    )
+}
+
+export default  LearnUseEffect;