【web前端】一分钟带你搞懂 useState

useState 是 React 中的一个 Hooks，它用于在函数组件中管理状态变量。

如何使用

1. 导入 useState：在函数组件中导入 useState。

import { useState } from 'react';

2. 定义状态变量：使用 useState 定义状态变量。

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

useState 接受一个参数 initialState，它是初始值，如果不传递，那么默认值将为 undefined。useState 返回一个包含两个元素的数组，第一个元素是当前状态变量的值，第二个元素是一个函数，用于更新状态变量的值。

3. 更新状态变量：使用 setState 函数更新状态变量的值。

setState(newState);

setState 接受一个参数 newState，它是要更新的新值。setState 函数将触发组件的重新渲染。

setState 的第二个参数

setState 的第二个参数是一个函数，可以用于更新 state 时进行一些操作。

例如：

const [number, setNumber] = useState(0);

// 第二个参数函数
const updateNumber = (newNumber) => {
  setNumber(newNumber * 2);
}

// 使用
setNumber(10, updateNumber);

// 结果
console.log(number) // 20

setNumber 的第二个参数 updateNumber 会将传入的 newNumber * 2 并传给 setNumber 进行更新，因此最终 number 的值为 20。

需要注意

1. useState 是响应式的，它可以让函数组件在发生更新时重新渲染。
2. useState 不能在条件语句（if 或者 switch）中使用，因为它每次都会在渲染过程中被调用，可能会导致不可预知的结果。
3. useState 可以接受任何 JavaScript 值作为参数，但是应尽可能避免使用复杂的对象或数组，可以使用 useReducer 来替代。
4. useState 的第二个参数是一个函数，它会在组件第一次渲染时被调用，可以用来设置初始值。