react

react/react高阶/project/src/App.js

@@ -1,14 +1,24 @@
+import { useState } from 'react';
 import './App.css';
 // 1.引入组件
 import Part from './components/LearnUseState.jsx'
-
+import Count from './components/Count.jsx'
+import Part2 from './components/LearnUseEffect.jsx'
 function App() {
-  return (
+  let [open,setOpen] = useState(true)
+  function show() {
+    setOpen(true);
+  }
+  return open ?(
     <div className="App">
       {/* 2.使用组件 */}
       <Part/>
+      <Count/>
+      <Part2/>
     </div>
-  );
+  ) : <div className='App'>
+      <button onClick={show}>显示</button>
+  </div>
 }
 
 export default App;

react/react高阶/project/src/components/Count.jsx

@@ -0,0 +1,23 @@
+import {useState} from 'react';
+function Count() {
+    let [count,setCount] = useState(0);
+    function handleAdd() {
+        setCount(count + 1);
+    }
+    function handleReduce() {
+        setCount(count - 1);
+    }
+    return (
+        <>
+            <h1>计数器</h1>
+            <h3>初始值：{count}</h3>
+            <button onClick={handleAdd}>增加</button>
+            <button onClick={handleReduce}>减少</button>
+            <button onClick={() => {
+                // 异步修改
+                // setCount(count + 2)
+            }}>双倍增加</button>
+        </>
+    )
+}
+export default Count;

react/react高阶/project/src/components/LearnUseEffect.jsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+/**
+ * effect 译为："副作用"
+ * useEffect 是hook的钩子 让组件与外部系统进行同步绑定
+ * 可以实现函数组件的声明周期
+ * 相当于：componentDidMount componentDidUpdate componentDidUnMount 这三个生命周期的结合
+ * useEffect(setup, dependencies?)
+ * useEffect(()=>{},[xxx]?)
+ */
+function Item({name,home}) {
+    // 3.模拟componentDidUnMount 生命周期 
+    useEffect(()=>{
+        return () => {
+            // 在组件卸载前执行完的代码
+            console.log("打印")
+        }
+    },[])
+    return (
+        <>
+            <p>我叫{name},住在{home}</p>
+        </>
+    )
+}
+function Part2() {
+    let [user,setUser] = useState("孙悟空");
+    let [open,setOpen] = useState(true);
+    // 1.每一次组件进行渲染就会执行 执行一些副作用
+    // useEffect(()=>{
+    //     // 要操作的副作用
+    //     console.log("useEffect 被执行了");
+    // })
+    // 2.相当于componentDidMount生命周期
+    // useEffect(()=>{
+    //     console.log("第二种用法")
+    // },[])
+    // 4.监听state或props中的值改变 并且 setup函数首次渲染时执行
+    useEffect(()=>{
+        console.log("改变了")
+    },[user])
+    return open?(
+        <>
+            <h1>{user}</h1>    
+            <Item name={user} home={'花果山'}></Item>        
+        </>
+    ) : (
+        <>
+            <h1>{open}</h1>     
+        </>
+    )
+
+}
+export default Part2;