study4

react/study4/project/src/App.js

@@ -2,12 +2,16 @@ import logo from './logo.svg';
 import './App.css';
 import Vase from './components/Vase'
 import Table from './components/Table'
+import TestUseState from './components/useState'
+import Count from './components/Count'
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <Vase/>
-        <Table/>
+        {/* <Vase/>
+        <Table/> */}
+        {/* <TestUseState/> */}
+        <Count/>
       </header>
     </div>
   );

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

@@ -0,0 +1,38 @@
+import { useState } from "react";
+
+function Count() {
+    let [count,setCount] = useState(0);
+
+    function add() {
+        setCount(count + 1)
+    }
+    function reduce() {
+        setCount(count - 1)
+    }
+
+    // function newAdd() {
+    //     // setCount(count + 5)
+
+    // }
+
+    return(
+        <div>
+            <h3>
+                计数器
+            </h3>
+            <p>初始值：{count}</p>
+            <button onClick={add}>+1</button>
+            <br />
+            <button onClick={reduce}>-1</button>
+            <br />
+            <button onClick={()=>{
+                setCount((a)=>a+1)
+                setCount((a)=>a+1)
+                setCount((a)=>a+1)
+                setCount((a)=>a+1)
+                setCount((a)=>a+1)
+            }}>+5</button>
+        </div>
+    )
+}
+export default Count;

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

@@ -0,0 +1,50 @@
+// Hooks 16.8版本后引入的一个钩子 主要解决：函数组件中数据修改的 
+import { useState } from "react";
+
+// function Demo() {
+//     // hooks钩子写在函数组件顶部
+//     // 可以定义多个钩子
+//     let [name,setName] = useState("LiLi");
+//     let [age,setAge] = useState(10)
+//     let [address,setAddress] = useState("哈尔滨")
+  
+//     return (
+//         <div>
+//             <p>我的名字：{name},今年{age}岁,我住在{address}</p>
+//             <button onClick={()=>{
+//                 setName("Lucy")
+//                 setAge(20)
+//                 setAddress("沈阳")
+//             }}>
+//                 修改
+//             </button>
+//         </div>
+//     )
+// }
+
+function Demo() {
+    let [user,setUser] = useState({
+        name:'小明',
+        age: 20
+    })
+    return (
+        <div>
+            <p>
+                我的名字：{user.name}
+            </p>
+            <p>
+                我的年龄：{user.age}
+            </p>
+            <button onClick={()=>{
+                setUser({...user, name:"小红",age:18})
+            }}>
+                修改
+            </button>
+        </div>
+    )
+}
+
+
+
+
+export default Demo;