useCallBackReducer

最新推荐文章于 2025-11-25 08:56:07 发布

原创最新推荐文章于 2025-11-25 08:56:07 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #react native

react 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了React Hooks中的自定义Hook——useCallBackReducer，它结合了useReducer和useCallback，使得在状态更新后能够触发回调函数。通过这个自定义Hook，开发者可以在状态变化时得到最新状态并进行相应的处理，提高了代码的可维护性和灵活性。


import { useEffect, useRef, useReducer } from 'react'

const useCallBackReducer = (reducer, initialState) => {
	const [state, dispatch] = useReducer(reducer, initialState)
	const isUpdate = useRef()
	useEffect(() => {
		if (isUpdate.current) {
			// 不设置回调函数的话 isUpdate.current 是undefined,所以不会执行
			isUpdate.current(state)
		}
	}, [state])
	const useDispatch = (action, cb) => {
		//劫持dispatch,将回调函数赋予isUpdate.current
		//状态更新后会执行回调函数，在回调函数第一个参数可以获取到最新的状态
		isUpdate.current = cb
		dispatch(action)
	}

	return [state, useDispatch]
}

export default useCallBackReducer