关于hook的useState带回调函数的那些事

在class类组件里面，setState的回调函数使用起来非常方便，尤其是重新获取dom执行一系列的操作。在hook的useState本身是没有这个回调功能的，我们可以通过自动义hook来实现一个自己的回调。

import React, { useState, useEffect, useRef, useCallback } from 'react'

const useStateCallback = (initialState) => {
    const [state, setState] = useState(initialState);
    const cbRef = useRef(null); 
    const stateRef = useRef(state)

    const setStateCallback = useCallback((state, cb) => {
        stateRef.current = state
        cbRef.current = cb;
        setState(state);
    }, []); 

    useEffect(() => {
        if (cbRef.current) { 
            cbRef.current(state);
            cbRef.current = null; 
            stateRef.current = null
        }
    }, [stateRef.current]);

    return [state, setStateCallback];
}

export default useStateCallback

参考了别人的资料，进行了一定程度改造。

说明：先通过useRef定义好cbRef、stateRef，每次操作setSate的时候，重新取值，setState会触发再次render，因为每次 useEffect 都会在 render DOM 操作完之后执行,所以callback后能拿到最新state,并执行一些列操作。执行完后将cbRef、stateRef设置为null，保证每一次setState始终执行回调