简介
返回一个有状态值和一个函数来更新它，在初始渲染期间，返回的状态与作为第一个参数传递的值相同。steState函数用于更新状态。它接受一个新的状态值，并排队等待重新渲染该组件。
在后续重新渲染期间，useState返回的第一个值将始终是应用更新后的最新状态。
注意！ React保证setState函数身份是稳定的，并且在重新渲染时不回改变。这就是为什么可以安全的从useEffect或者useCallback依赖列表中省略的原因。
useState相当于我们在原生JS中定义变量，而只有使用这种方法定义变量，React才能知道相应的变量。
什么是 useState
setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。
特性
- 函数式更新
- 惰性初始 state
- 跳过 state 更新
使用方式/语法
const [state, setState] = useState(initialState);
举一个栗子 函数式更新
如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。下面的计数器组件示例展示了 setState 的两种用法：
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
</>
);
}
过程：
“+” 和 “-” 按钮采用函数式形式，因为被更新的 state 需要基于之前的 state。但是“重置”按钮则采用普通形式，因为它总是把 count 设置回初始值。
如果你的更新函数返回值与当前 state 完全相同，则随后的重渲染会被完全跳过。
注意
与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。
const [state, setState] = useState({});
setState(prevState => {
// 也可以使用 Object.assign
return {...prevState, ...updatedValues};
});
useReducer 是另一种可选方案，它更适合用于管理包含多个子值的 state 对象。
举第二个栗子 惰性初始 state
initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用：
const [state, setState] = useState(() => {
const initialState = someExpensiveComputation(props);
return initialState;
});
