useState

用于在函数组件中添加和管理状态（state）。

index.tsx

import React, { useState } from 'react';

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

export default MyButton;

数据异步

for (let i = 0; i < 3; i++) {
  setCount(count + 1);
}

在 Hooks 中 setCount 赋值是异步的，循环迭代过程中的每次更新都会覆盖前一次的更新，最终结果只执行了一次 count + 1。

为了处理这种情况，可以使用回调函数，其实就是利用闭包来捕获迭代变量。

for (let i = 0; i < 3; i++) {
  setCount((prevCount) => {
    return prevCount + 1
  });
}

更新对象类型数据

在 React 中，当比较对象类型的状态值时，它会比较引用地址。如果引用地址不变，React 会使用 Object.is() 方法来对比当前值和新值。如果 Object.is() 返回 true，React 将会认为状态没有发生变化，不会触发重新渲染。

const [person, setPerson] = useState({
  name: "Alice",
  age: 18
});

需要先将 person 拷贝一份，修改之后再进行赋值

let newData = {...person};
newData.age = 24;
setPerson(newData);

还可以使用展开运算符的简写形式

setPerson({
  ...person,
  age: 24
});