您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~
在业务中有比较多的场景需要在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去根据我们的业务实现一些和状态有关的工具函数。
