useState回调函数

在看的小朋友,新的react hook写法,官方默认setState方法移除了回调函数,推荐使用useEffect,但是改动的数据过多还是有很多问题。so,我在useState基础上扩展了回调函数功能,就可以像以前类写法一样传递回调方法啦。

话不多说上代码

import {useEffect, useState, useRef} from "react";
 
 
function useCallbackState (od) {
    const cbRef = useRef();
    const [data, setData] = useState(od);
 
    useEffect(() => {
        cbRef.current && cbRef.current(data);
    }, [data]);
 
    return [data, function (d, callback) {
        cbRef.current = callback;
        setData(d);
    }];
}
 
export {useCallbackState};

使用的时候像平常一样, 回调函数可以传可以不传递 

const [data,setData] = useCallbackState({});
 
setData({}, function (data) {
    console.log("啦啦啦,我是回调方法", data);
})

 

posted on 2021-05-14 15:30  漫思  阅读(3362)  评论(0编辑  收藏  举报

导航