useState是 React 中的一个 Hooks，它用于在函数组件中管理状态变量。
如何使用
- 导入
useState：在函数组件中导入useState。
import { useState } from 'react';
- 定义状态变量：使用
useState定义状态变量。
const [state, setState] = useState(initialState);
useState 接受一个参数 initialState，它是初始值，如果不传递，那么默认值将为 undefined。useState 返回一个包含两个元素的数组，第一个元素是当前状态变量的值，第二个元素是一个函数，用于更新状态变量的值。
- 更新状态变量：使用
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。
需要注意
- useState 是响应式的，它可以让函数组件在发生更新时重新渲染。
- useState 不能在条件语句（if 或者 switch）中使用，因为它每次都会在渲染过程中被调用，可能会导致不可预知的结果。
- useState 可以接受任何 JavaScript 值作为参数，但是应尽可能避免使用复杂的对象或数组，可以使用 useReducer 来替代。
- useState 的第二个参数是一个函数，它会在组件第一次渲染时被调用，可以用来设置初始值。
网友评论