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