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