useSetState

作用

管理 object 类型 state 的 Hooks，用法与 class 组件的 this.setState 基本一致

原理

调用设置值方法的时候，会根据传入的值是否为函数。如果是函数，则入参为旧状态，输出新的状态。否则直接作为新状态。这个符合 setState 的使用方法。 使用对象拓展运算符，返回新的对象，保证原有数据不可变

源码

import { useCallback, useState } from 'react'
import { isFunction } from '../utils'

export type SetState<S extends Record<string, any>> = <K extends keyof S>(
  state: Pick<S, K> | null | ((prevState: Readonly<S>) => Pick<S, K> | S | null)
) => void

const useSetState = <S extends Record<string, any>>(
  initialState: S | (() => S)
): [S, SetState<S>] => {
  const [state, setState] = useState<S>(initialState)

  // 通过 useCallback 缓存 setMergeState 函数，避免每次渲染都创建新的函数，合并状态
  const setMergeState = useCallback((patch) => {
    setState((prevState) => {
      // 如果 patch 是函数，则执行 patch 函数，否则直接返回 patch，作为新的状态
      const newState = isFunction(patch) ? patch(prevState) : patch
      // 使用对象拓展运算符，返回新的对象，保证原有数据不可变
      return newState ? { ...prevState, ...newState } : prevState
    })
  }, [])

  return [state, setMergeState]
}

export default useSetState