关于useState联想到的问题，自定义useSetState...

实现自定义useSetState

基础 Hook

useState

看下官方定义

const [state, setState] = useState(initialState);

返回一个 state，以及更新 state 的函数。

在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。

setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。

setState(newState);

在后续的重新渲染中，useState 返回的第一个值将始终是更新后最新的 state。

useState作为我们日常开发中用的最多的一个hooks，我们更新state会使用setState(newState);

那么这个newState如果是对象的话，我们更新就要先拷贝之前的对象，再把要更新的对象合并进去，就是这样子的

const [state, setState] = useState({ name: 'xxx',  age: 18});
setState({ ...state, name: 'hzd' });

用过react小伙伴都知道，我们的class组件直接使用this.setState({name: 'hzd'})即会自动合并state。

useSetState

那我们自己实现一个useSetState可不可以呢，sure。

import { useCallback, useState } from 'react';
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;
export const useSetState = <S extends Record<string, any>>(
  initialState: S | (() => S),
): [S, SetState<S>] => {  
    const [state, setState] = useState<S>(initialState);  
    const setMergeState = useCallback((arg: any) => {  
    setState((prevState) => {
      const newState = typeof arg === 'function' ? arg(prevState) : arg;
      return newState ? { ...prevState, ...newState } : prevState;
    }); 
  }, []);
  return [state, setMergeState];
};

使用

const [state, setState] = useSetState({ name: 'xxx',  age: 18});
setState({ name: 'hzd' });

撒花结语🎉！！！