类似 vue 的 data 选项

功能

向组件添加响应式变量，当响应式变量变化时，组件的视图UI也会跟着变化【数据驱动视图】

语法

  • 参数为变量的初始值
  • 返回值为一个只有两个元素的数组，第一项元素为传入的参数，第二项元素是一个setter 函数

useState 的异步更新机制

通过 setter 函数更新响应式变量的过程是异步的

import { useState } from "react";

export default function Father() {
  const [count, setcount] = useState(10);

  function increase() {
    setcount(count + 1);

    console.log("count的值为:", count);
  }

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

点击按钮后的执行结果

count的值为: 10

可见在用 setter 函数更新响应式变量后，无法立马获取到其最新的值！

useState 的异步更新机制：
调用 setter 函数更新响应式变量后，React 不会立即更新响应式变量的值，而是将更新请求放入一个队列中。在本次事件循环结束时，React 会批量处理队列中的所有响应式变量更新，并触发重新渲染。

为什么要异步更新而不是同步更新 ？

1. 可显著提高性能
React 可以在一次渲染过程中合并和批处理多个状态更新，减少不必要的重复计算和渲染操作。

2. 避免死循环
若采用同步更新，则每次更新状态会触发重新渲染，而重新渲染又可能触发新一轮的状态更新，形成死循环。

连续的更新会被合并！

import { useState } from "react";

export default function Father() {
  const [count, setcount] = useState(10);

  function increase() {
    setcount(count + 2);
    setcount(count + 1);
  }

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

点击按钮后，页面显示的 count 值为 11

正如异步更新机制的描述，多个状态更新会被合并，仅最后一次更新生效！

怎样“及时”获取到更新后的值？

import { useState } from "react";

export default function Father() {
  const [count, setcount] = useState(10);

  function increase() {
    setcount(count + 1);

    setcount((count) => {
      console.log("setcount传入的参数count的值为:", count);
      return count + 1;
    });
  }

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

点击按钮后的执行结果

setcount传入的参数count的值为: 11

此时页面的 count 的值为 12

可见，通过函数传参的方式，可以让 setter 函数获取到更新后的变量值。

同时，也从形式上避免了连续的更新合并，但实质上，函数传参的方式会创建新的更新请求队列，从而避开了同一更新请求队列中的合并。

不同版本 react 的异步更新差异

  • react <= 17 时，在组件生命周期或React合成事件中，setState是异步； 在setTimeout或者原生dom事件(如 addEventListener ) 中，setState是同步。
  • 从 react18 开始，所有的 setState 都是异步的

注意事项

  1. useState 传入的初始值，只在组件挂载（render）时执行有效，在组件re-render (更新渲染) 时不会执行！
  2. useState 返回的响应式变量的值，只能通过一起返回的 setter 函数改变！

如何解决usestate设置对象值没更新_useState

src/page/Index/Father.jsx

import { useState } from "react";
import Child from "./Child.jsx";

export default function Father() {
  const [userInfo, setUserInfo] = useState({
    name: "朝阳",
  });

  function changeName() {
    setUserInfo({
      name: "张三",
    });
  }

  return (
    <div style={{ border: "1px solid", padding: "10px" }}>
      <h1>父组件</h1>
      <p>名称为：{}</p>
      <button onClick={changeName}>改名称</button>
      <Child userInfo={userInfo} />
    </div>
  );
}

src/page/Index/Child.jsx

import { useState } from "react";

function Child({ userInfo }) {
  const [name] = useState();

  return (
    <div style={{ border: "1px solid", padding: "10px", margin: "10px" }}>
      <h1>子组件</h1>
      <p>父组件传入的名称为：{}</p>
      <p>子组件中 useState 返回的名称为：{name}</p>
    </div>
  );
}

export default Child;

使用范例 – 响应式变量

import { useState } from "react";
const Demo = () => {
  const [count, setCount] = useState(0);
  function addOne() {
    setCount(count + 1);
  }
  return <button onClick={addOne}>{count}</button>;
};

export default Demo;
  • 声明了响应式变量 count ，初始值为 0
  • 通过 [] 进行了数组的解构赋值，将 0 赋值给了 count ，可响应式改变 count 值的 setter 函数赋值给了
  • 通过 setCount 可修改 count 的值 (setCount 可以自定义为其他名称，如 updateCount , 但推荐统一 set 开头)
  • setCount 的语法是将 count 的新值作为参数传入
  • setCount 的作用是触发视图根据 count 的新值重新渲染

使用范例 – 响应式对象

const [person, setPerson] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@'
  });

  function handleFirstNameChange(e) {
     // 修改属性值
     setPerson({
      ...person,
      firstName: e.target.value
    });
  }

修改嵌套的属性值

const [person, setPerson] = useState({
    name: 'Niki de Saint Phalle',
    artwork: {
      title: 'Blue Nana',
      city: 'Hamburg',
      image: 'https:///Sd1AgUOm.jpg',
    }
  });

  function handleNameChange(e) {
    setPerson({
      ...person,
      name: e.target.value
    });
  }

  function handleTitleChange(e) {
    setPerson({
      ...person,
      artwork: {
        ...person.artwork,
        title: e.target.value
      }
    });
  }

显然，非常麻烦，可以用 Immer 库编写简洁的更新逻辑

npm install use-immer
import { useImmer } from 'use-immer';
const [person, updatePerson] = useImmer({
    name: 'Niki de Saint Phalle',
    artwork: {
      title: 'Blue Nana',
      city: 'Hamburg',
      image: 'https:///Sd1AgUOm.jpg',
    }
  });

  function handleNameChange(e) {
    updatePerson(draft => {
       = e.target.value;
    });
  }

  function handleTitleChange(e) {
    updatePerson(draft => {
      draft.artwork.title = e.target.value;
    });
  }

使用范例 – 响应式数组

const [fruitList, setFruitList] = useState([]);

  function changeHandler(e) {
    let newValue = e.target.value;

    if (fruitList.includes(newValue)) {
      // 数组删除元素
      setFruitList(fruitList.filter((item) => item !== newValue));
    } else {
      // 数组新增元素
      setFruitList([...fruitList, newValue]);
    }
  }