关于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;