useSetState

最新推荐文章于 2024-08-01 11:01:13 发布

琉璃枫桦

最新推荐文章于 2024-08-01 11:01:13 发布

阅读量2.8k

点赞数 1

分类专栏： Hook 文章标签： js typescript

本文链接：https://blog.csdn.net/weixin_43909372/article/details/114540097

版权

Hook 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了一个名为useSetState的高阶函数，它是基于React的useState Hook编写的，旨在提供与React组件中this.setState类似的功能。区别在于，useSetState允许更加灵活的更新状态，支持传递一个部分状态对象或者一个接受前一状态的函数。同时，博客提到了this.setState的回调函数特性，但在useSetState中没有直接体现。

摘要由CSDN通过智能技术生成

useSetState 编写

useSetState 是通过 useState 编写的同类组件this.setState 功能相似的公共方法。(存在回调函数的区别，this.setState 第二个参数有回调);

import { useState } from 'react';
import _ from 'lodash';

type Patch<State> = (
    patch: Partial<State> | ((prevPatch: State) => Partial<State>)
) => void;

type ExcludeT<State> = Exclude<Extract<State, object>, Function>;

export function useSetState<T>(initialState: ExcludeT<T>): [ExcludeT<T>, Patch<ExcludeT<T>>] {
    if (!_.isPlainObject(initialState)) { // initialState && initialState.constructor === Object && Object.getPrototypeOf(initialState) === Object.prototype
        throw new Error('state is not Plain Object');
    }
    const [state, setState] = useState(initialState);
    const setUseState: Patch<ExcludeT<T>> = patch => setState(prevState => ({
        ...prevState,
        ...(patch instanceof Function ? patch(prevState) : patch)
    }));
    return [state, setUseState];
}