【React】自定义Hook，实现带有回调功能的useState

前言：我们在函数式组件中会遇到这样一个需求：在更新state之后立刻拿到最新的值，但是useState没有提供回调函数，我们可以自定义一个带有回调功能的useState

这里自定义Hook用到了useState、useEffect、useRef

• useEffect: 监听state的更新
• useRef: 在组件的生命周期内都不会变化，可以用来保存回调函数。

export const useStateCallback = (initValue)=>{
    const [state,setState] = useState(initValue)
    
    let fn = useRef(null)

    const _setState = useCallback((newValue, callback) => {
        setState(newValue)
        fn.current = callback
    }, [])
    
    useEffect(()=>{
        fn.current && fn.current(state)
    },[state])

    return [state, _setState]
}