持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情
Hook API索引
基础的Hook: useState useEffect useContext 额外的Hook: useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue
基础Hook
**### useState
const [state, setState] = useState(initialState);
返回一个 state，以及更新 state 的函数。
在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。
setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。
setState(newState);
在后续的重新渲染中，useState 返回的第一个值将始终是更新后最新的 state。**
函数式更新
如果新的state需要通过使用先前的state计算得出，那么可以将函数传递给setState。该函数将接收先前的state,并返回一个更新后的值。举例来说：
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 完全相同，则随后的重渲染会被完全跳过。
tips：与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。
setState(prevState => {
// 也可以使用 Object.assign
return {...prevState, ...updatedValues};
});
useReducer 是另一种可选方案，它更适合用于管理包含多个子值的 state 对象。
惰性初始 state
initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用：
const [state, setState] = useState(() => {
const initialState = someExpensiveComputation(props);
return initialState;
});
