react

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

@@ -1,23 +1,9 @@
-import logo from './logo.svg';
 import './App.css';
-
+import LearnUseState from './components/LearnUseState';
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <LearnUseState></LearnUseState>
     </div>
   );
 }

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

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+/**
+ * hooks
+ * 钩子 
+ * 在函数组件内部进行使用
+ * 不可以在for、if、普通函数中使用
+ * hook必须在顶层使用
+ * 
+ * useState
+ * 定义状态及状态的修改
+ * 第一个值：初始状态
+ * 第二个值：修改状态的函数
+ */
+function LearnUseState() {
+    let [count, setCount] = useState(1);
+    const [person, setPerson] = useState({
+        name: "图图",
+        age: 3
+    })
+    function changeCount() {
+        setCount(()=>{
+           return count++
+        })
+        setCount(5)
+    }
+    const changeAge = () => {
+        setPerson({...person,age:18})
+    }
+    return <>
+        <h1>初始值:{count}</h1>
+        <h1>我叫{person.name},今年{person.age}</h1>
+        <button onClick={changeCount}>修改</button>
+        <button onClick={changeAge}>修改年龄</button>
+    </>
+}
+
+export default LearnUseState;