React学习笔记3：组件状态管理-useState

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）

基本使用

import { useState } from "react";

function App() {
  // useState(0) 中的 0 就是初始值
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  );
}

export default App;

效果（点击按钮后，会+1）：

状态的修改规则

在React中状态被认为是只读的，我们应该始终替换它而不是修改它, 直接修改状态不能引发视图更新。

错误代码示例：

import { useState } from "react";

function App() {
  // useState(0) 中的 0 就是初始值
  const [count, setCount] = useState(0);

  return (
    <div>
      <button
        onClick={() => {
          count++;
        }}
      >
        {count}
      </button>
    </div>
  );
}

export default App;

上面的代码直接修改count的值，在浏览器中点击按钮时，会直接报错。

修改对象状态

所以要修改一个对象的状态，应该是先将其解构出来，然后再重新赋值。
数组也是类似的
示例代码：

import { useState } from "react";

function App() {
  const [man, setMan] = useState({ name: "zhangsan" });

  return (
    <div>
      <button
        onClick={() => {
          setMan({
            ...man,
            name: "zhangsan2",
          });
        }}
      >
        {man.name}
      </button>
    </div>
  );
}

export default App;