在看的小朋友,新的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); })