study4

react/study4/project/src/App.js

@@ -4,6 +4,7 @@ import Vase from './components/Vase'
 import Table from './components/Table'
 import TestUseState from './components/useState'
 import Count from './components/Count'
+import Test from './components/useEffect'
 function App() {
   return (
     <div className="App">
@@ -11,7 +12,8 @@ function App() {
         {/* <Vase/>
         <Table/> */}
         {/* <TestUseState/> */}
-        <Count/>
+        {/* <Count/> */}
+        <Test/>
       </header>
     </div>
   );

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

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+
+function MainItem({name,age}) {
+    useEffect(()=>{
+        return (
+            // 3.组件卸载前执行
+            // 这里返回回调 会在组件卸载前执行
+            // 处理一些冗余
+            console.log("卸载组件")
+        )
+    },[])
+    return(
+        <div>
+            <h1>我的名字：{name}</h1>
+            <h2>我的年龄：{age}</h2>
+        </div>
+
+    )
+}
+
+function Test({name=''}) {
+    let [msg, setMsg] = useState("这是一个关键信息")
+    // 1.每次组件渲染时 调用 执行一些副作用代码
+    // useEffect(()=>{
+    //     // 编写副作用代码
+    //     console.log("展示副作用")
+    // })
+    // 2.代表生命周期componentDidMount 挂载前
+    // useEffect(()=>{
+    //     console.log("组件渲染")
+    // },[])
+    // 4.监听state或者props发生变化 （组件初次渲染也会发生监听事件）
+    useEffect(()=>{
+        console.log("信息发生变化了")
+    },[msg,name])
+    return(
+        <div>
+            <h3>useEffect</h3>
+            <p>副作用</p>
+            <p>{msg}</p>
+            {/* <p>
+                <MainItem name={"LiLi"} age={18}></MainItem>
+            </p> */}
+            <div>
+                新名字：{name}
+            </div>
+            <button
+                onClick={()=>{
+                    setMsg("新的消息")
+                }}
+            >修改</button>
+        </div>
+    )
+}
+
+export default Test;