react18【系列实用教程】useState （2024最新版）

类似 vue 的 data 选项

功能

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

语法

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

使用范例 – 响应式变量

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: '[e-mail]'});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}});}

显然，非常麻烦，可以用 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://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]);}}