react

16.react/react高阶/project1/src/App.js

@@ -3,12 +3,14 @@ import './App.css';
 // 1.引入组件
 import LearnUseState from './components/LearnUseState.jsx';
 import Clock from './components/Clock.jsx';
+import LearnUseEffect from './components/LearnUseEffect.jsx';
 function App() {
   return (
     <div className="App">
      {/* 使用组件 */}
      <LearnUseState />
      <Clock/>
+     <LearnUseEffect/>
     </div>
   );
 }

16.react/react高阶/project1/src/components/LearnUseEffect.jsx

@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+/***
+ * useEffect:"副作用"
+ * 生命周期：
+ * construct
+ * render
+ * componentDidMount 
+ * componentDidUpdate
+ * componentWillUnmount
+ */
+function Item({name,age}) {
+    console.log(name,age,'++++')
+    const [name1,setName1] = useState(name);
+    const [age1,setAge1] = useState(age);
+    // 3.模拟componentWillUnmount生命周期
+    useEffect(()=>{
+        // 卸载 componentWillUnmount
+        return () => {
+            console.log("改变")
+        }
+    },[])
+    // 4.监听state或props中的值的改变 并且 首次渲染时 执行 
+    useEffect(()=>{
+        console.log("改变啊哈哈")
+        
+    },[name1,age1])
+    return (
+       <>
+        <p>我叫{name1},今年{age1}岁</p>
+        <button onClick={()=>{
+            setName1('喜羊羊')
+            console.log(name1,"触发1")
+        }}>修改</button>
+        <button onClick={()=>{
+            setAge1(10)
+            console.log("触发2",age1)
+        }}>修改年纪</button>
+       </>
+    )
+}
+function LearnUseEffect() {
+    // 1.每一次在组件进行渲染就会执行  执行一些副作用
+    // useEffect(()=>{
+    //     //执行的 副作用
+    //     // alert("你好")
+    //     // setTimeout(()=>{
+    //     // },1000)
+    //     console.log("执行l")
+    // })
+    // 2.componentDidMount 生命周期
+    // useEffect(()=>{
+    //     console.log("执行2")
+    // },[])
+    const [show,setShow] = useState(true);
+    // useEffect(()=>{
+    //     console.log("改变啊哈哈")
+    // },[show])
+    return (
+        <>
+            <h1>useEffect</h1>
+            <button onClick={()=>{
+                setShow(!show)
+                console.log(show,'show的值1')
+            }}>切換</button>
+            {
+                show ?  <Item name={'胡图图'} age={5}></Item> :<p>这是一个新的开始</p>
+            }
+           
+            
+        </>
+    )
+}
+export default LearnUseEffect;

16.react/react高阶/project1/src/index.js

@@ -6,9 +6,8 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  // <React.StrictMode>
     <App />
-  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function