需求
工作中发现,经常需要在修改state后执行回调,但是hook里并不能像setState那样有第二个参数,于是打算自己新建个hook实现一下这个cb回调
实现
通过ref来存储临时变量cb,然后对cb进行一个监听,代码如下
import React, { useEffect, useState, useRef } from "react";
const useCallbackState = (initState) => {
const cbRef = useRef();
const [data, setData] = useState(initState);
useEffect(() => {
cbRef.current && cbRef.current(data);
},[cbRef.current]);
return [data, function (payload, callback) {
setData(prev => {
cbRef.current = callback;
return typeof(payload) === 'function' ? payload(prev) : payload;
});
}];
}
export default useCallbackState