关于typescript:reactahooks源码分析之useSetState

剖析的源码来自https://github.com/alibaba/ho…

首先，ahook中文文档界面对useSetState的阐明为：治理 object 类型 state 的 Hooks，用法与 class 组件的 this.setState 基本一致。

useSetState的简略应用办法是：设置类型为对象（即string-any键值对）的状态，并在初始化的时候传入初始参数，之后调用setState（或者取其余的名字）来新增或批改状态，状态更新将导致从新渲染。

const [state, setState] = useSetState<类型>({
    hello: '',
    count: 0,
  });

这里是一些根底的源码剖析。

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



//为等号前面的类型取一个别名： 类型SetState，S被束缚自自映射类型｛string:any｝。
  //被取名的类型：(泛型k被束缚为s的属性名)函数
      //参数state的类型:Pick<S, K>（即在S类型中取某属性K）或null,或返回后面两种类型或S类型的函数。
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;


//首先规定了传入参数的泛型为S被束缚自自映射类型｛string:any｝。
//传入的参数为新的state，或一个输入参数是新state的函数。
//返回的参数为 [S, SetState<S>] 。
const useSetState = <S extends Record<string, any>>(
  initialState: S | (() => S),
): [S, SetState<S>] => {

  //应用了react的hook：useState来包装。
  const [state, setState] = useState<S>(initialState);

  //应用了一个useCallback，返回一个 memoized 回调函数（应用雷同参数时会间接返回后果）
  //封装了合并新旧state的操作。
  const setMergeState = useCallback((patch) => {
    setState((prevState) => {
      const newState = isFunction(patch) ? patch(prevState) : patch;
      //扩大符的作用是放弃原有的数据不变
      return newState ? { ...prevState, ...newState } : prevState;
    });
  }, []);

  return [state, setMergeState];
};

export default useSetState;