useState的介绍

useState是react自带的一个hook函数，它的作用是用来声明状态变量。 useState接受一个初始状态作为参数，并返回一个数组，数组的第一个元素是当前状态的值，第二个元素是用于更新状态的函数。我们从三个方面来看useState的用法，分别是声明、读取、使用（修改）然后说出他们的所有用法

1. 声明状态：

• 基本用法：使用初始状态值声明一个状态变量。

jsx
const [state, setState] = useState(initialState);

其中：

• 🏷️ state：当前状态的值。
• 🏷️ setState：用于更新状态的函数。
• 🏷️ initialState：状态的初始值。

useState 返回一个包含当前状态和状态更新函数的数组。✨

• 初始状态可以是基本类型（如字符串、数字、布尔值等）或对象/数组。🌟

jsx
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: 'John', age: 25 });
const [list, setList] = useState([1, 2, 3]);

• 初始状态可以通过函数延迟初始化，只在初始渲染时执行一次。

jsx
const [data, setData] = useState(() => fetchData());

2.读取状态：

• 使用解构赋值从状态数组中获取当前状态的值。

jsx
const [stateValue] = useState(initialState);

例如，获取计数器的当前值：

jsx
const [count, setCount] = useState(0);
console.log(count); // 输出当前计数器的值

3. 使用（修改）状态：

• 使用状态更新函数来改变状态的值。

  3.1 修改基本类型状态

jsx
const [count, setCount] = useState(0);

// 递增计数器
const increment = () => {
  setCount(count + 1);
};

// 设置计数器为特定值
const setToValue = () => {
  setCount(10);
};

3.2 修改对象状态：

jsx
const [user, setUser] = useState({ name: 'John', age: 25 });

// 更新用户的年龄
const updateAge = () => {
  setUser({ ...user, age: user.age + 1 });
};

// 修改用户的姓名和年龄
const updateNameAndAge = () => {
  setUser({ ...user, name: 'Jane', age: 30 });
};

3.3 修改数组状态：

jsx
const [items, setItems] = useState(['apple', 'banana', 'orange']);

// 添加新的水果到数组末尾
const addFruit = () => {
  setItems([...items, 'grape']);
};

// 删除数组中的第一个元素
const removeFirstItem = () => {
  setItems(items.slice(1));
};

3.4函数式更新：

setState 还可以接受一个函数作为参数，用于基于先前的状态计算新的状态：

• 这样可以避免在更新时依赖于当前状态的问题。

jsx
setCount(prevCount => prevCount + 1);

• 注意，状态的更新是合并而不是替换，所以如果状态是对象或数组，更新函数只需提供要更改的属性或元素。

jsx
setUser({ ...user, age: 26 }); // 修改用户对象的age属性
setArray(prevArray => [...prevArray, newItem]); // 添加新元素到数组