useState

useState 是一个 React Hook（函数）,它允许我们向组件添加一个 状态变量 ,从而控制影响组件的渲染结果。

本质：和普通JS变量不同的是,状态变量一旦发生变化,组件的视图UI也会跟着变化（数据驱动视图）

基本使用

useState 接收一个参数作为状态的初始值,并返回一个包含两个元素的数组,第一个元素是当前的状态值,第二个元素是更新该状态的函数。

调用 setState 函数更新 state 将会重新渲染组件。

1const [state, setState] = useState(initialState)

对于基本类型的使用

1import { useState } from "react";
2
3export default function App() {
4  let [count, setCount] = useState<number>(0);
5  function handler() {
6    setCount(count + 1);
7  }
8  return (
9    <>
10      <button onClick={handler}>{count}</button>
11    </>
12  );
13}

对于复杂类型的使用

在 React 中,状态被认为是只读的,因此 你应该替换它而不是改变现有对象。

数组

1import { useState } from "react";
2
3export default function App() {
4  let [arr, setArr] = useState([1, 2, 3]);
5  function handler() {
6    setArr([...arr, 4]);
7  }
8  return (
9    <>
10      <button onClick={handler}>{arr}</button>
11    </>
12  );
13}

对象

1import { useState } from "react";
2
3export default function App() {
4  let [obj, setObj] = useState(() => {
5    // 处理逻辑,一定要返回值
6    // 这个函数只会初始化执行一次
7    return {
8      name: "dancy",
9      age: 18,
10    };
11  });
12  function handler() {
13    // 写法一
14    // setObj({
15    //   ...obj,
16    //   age: obj.age + 1,
17    // });
18
19    // 写法二：传递一个更新函数
20    // setObj((prev) => {
21    //   return {
22    //     ...prev,
23    //     age: prev.age + 1,
24    //   };
25    // });
26
27    // 写法三
28    setObj(Object.assign({}, obj, { age: obj.age + 1 }));
29  }
30  return (
31    <>
32      <div>{obj.name}</div>
33      <div>{obj.age}</div>
34      <button onClick={handler}>更新</button>
35    </>
36  );
37}

useState#

基本使用#

useState

基本使用