react自定义useState hook获取更新后值

您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

在业务中有比较多的场景需要在setState中获取更新后的值从而进行下一步的业务操作,在Class组件中可以通过：

this.setState({
   
    name: '123'
}, (newVal) => {
   
    console.log(newVal);
})

而react自身的useState hook并不支持这样做，通常是这样获取新值：

useEffect(() => {
   
    console.log(name);
}, [name])

自定义useState主要思路其实是基于useState和useEffect，在useEffect获取到状态变化时回调callback函数，从而拿到新值，直接上代码~

import {
    SetStateAction, useCallback, useState, useEffect, useRef } from 'react';

const useStateCallback = (defaultVal: any) => {
   
  const [state, setState] = useState(defaultVal);
  const listenRef = useRef<any>(); //监听新状态的回调器
  const _setState = useCallback((newVal: SetStateAction<any>, callback: Function) => {
   
    //更新业务
    listenRef.current = callback;
    setState(newVal);
  }, []);
  useEffect(() => {
   
    listenRef.current && listenRef.current(state); //回调新状态
  }, [state]);

  return [state, _setState];
};

export default useStateCallback;

其实hook本身就是多了一步在更新状态时把自定义的callback丢给useRef，让useRef长久保留在内存中，并且监听状态，在状态更新时调用内存中（useRef）中的回调函数，从而实现。

hooks其实本身并非高深的东西，其实hooks就是函数，而自定义hook其实就是基于react核心的一些hooks去根据我们的业务实现一些和状态有关的工具函数。