React:useState的使用

15_React/day-4/code/my-app/src/App.js

@@ -1,22 +1,12 @@
 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>
+        <LearnUseState />
       </header>
     </div>
   );

15_React/day-4/code/my-app/src/components/LearnUseState.jsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+
+function LearnUseState() {
+  // 所有hook 必须 在函数组件顶层调用，不能在任何其他代码块中使用（if，for，普通函数）。
+  // useState调用时 可以传入一个参数，用来指定状态的初识值：
+  //  该参数 有两种类型 a: 直接指定一个具体值（任意类型值）
+  // useState 返回 一个数组，[状态值, 修改状态的函数]
+  // let [count, setCount] = useState(0);
+
+  // let [state, setState] = useState({
+  //   count: 0,
+  //   user: { name: 'guoguo', age: 18 },
+  // });
+
+  // useState 可以多次调用，这样上面状态 就可以拆分
+
+  let [count, setCount] = useState(0);
+
+  let [user, setUser] = useState({ name: 'guoguo', age: 18 });
+
+  return (
+    <div>
+      {/* <button
+        onClick={() => {
+          setCount(count + 1);
+        }}
+      >
+        您点击了我 {count} 次。
+      </button> */}
+
+      {/* <p>我是 {state.user.name} </p>
+
+      <button
+        onClick={() => {
+          setState({ ...state, count: state.count + 1 });
+        }}
+      >
+        您点击了我 {state.count} 次。
+      </button> */}
+
+      <p>我是 {user.name} </p>
+
+      <button
+        onClick={() => {
+          setCount(count + 1);
+        }}
+      >
+        您点击了我 {count} 次。
+      </button>
+    </div>
+  );
+}
+
+export default LearnUseState;