类似 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 都是异步的
注意事项
- useState 传入的初始值，只在组件挂载（render）时执行有效，在组件re-render (更新渲染) 时不会执行！
- useState 返回的响应式变量的值，只能通过一起返回的 setter 函数改变！
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>名称为：{userInfo.name}</p> <button onClick={changeName}>改名称</button> <Child userInfo={userInfo} /> </div> ); }
src/page/Index/Child.jsx
import { useState } from "react"; function Child({ userInfo }) { const [name] = useState(userInfo.name); return ( <div style={{ border: "1px solid", padding: "10px", margin: "10px" }}> <h1>子组件</h1> <p>父组件传入的名称为：{userInfo.name}</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@sculpture.com' }); 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://i.imgur.com/Sd1AgUOm.jpg', } }); function handleNameChange(e) { setPerson({ ...person, name: e.target.value }); } function handleTitleChange(e) { setPerson({ ...person, artwork: { ...person.artwork, title: e.target.value } }); }
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://i.imgur.com/Sd1AgUOm.jpg', } }); function handleNameChange(e) { updatePerson(draft => { draft.name = 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]); } }
