react

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

@@ -1,9 +1,16 @@
+import { useState } from 'react';
 import './App.css';
 import LearnUseState from './components/LearnUseState';
+import LearnUseEffect from './components/LearnUseEffect';
 function App() {
+  let [show,isShow] = useState(true);
   return (
     <div className="App">
       <LearnUseState></LearnUseState>
+      {
+        show ?  <LearnUseEffect></LearnUseEffect> : <div>已卸载</div>
+      }
+     
     </div>
   );
 }

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

@@ -0,0 +1,38 @@
+import { useState, useEffect } from "react";
+import { Fragment } from "react";
+
+// 生命周期 componentDidUpdate componetDidMount componentWillUnMount
+function LearnUseEffect() {
+    const [name,setName] = useState("喜羊羊");
+    const [age,setAge] = useState(7);
+    // 1. 每一次在组件挂载及更新阶段调用 执行副作用
+    useEffect(()=>{
+        console.log("你好")
+    })
+    // 2.componetDidMount生命周期
+    useEffect(()=>{
+        console.log("大家好")
+    },[])
+    useEffect(()=>{
+        console.log("1111")
+        // 3.componentWillUnMount 卸载
+        return () => {
+            console.log("哈哈哈")
+        }
+    },[])
+    // 4.componetDidMount componentDidUpdate
+    useEffect(() => {
+        console.log("end")
+    },[name,age])
+    return <Fragment>
+        <h1>我叫{name},今年{age}岁</h1>
+        <button onClick={()=>{
+            setName("灰太狼")
+        }}>修改</button>
+        <button onClick={()=>{
+            setAge(12)
+        }}>修改</button>
+    </Fragment>
+}
+
+export default LearnUseEffect;