类似 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: '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
}
});
}
显然,非常麻烦,可以用 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]);
}
}