自定义的useState，实现setState方法的回调

最新推荐文章于 2024-08-01 11:01:13 发布

葵妹子

最新推荐文章于 2024-08-01 11:01:13 发布

阅读量3.6k

点赞数 1

分类专栏： hooks 文章标签： reactjs 前端

原文链接：https://www.imooc.com/article/301277

版权

hooks 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

熟悉react的朋友都知道，我们使用class组件更新状态时，setState会支持两个参数，一个是更新后的state或者回调式更新的state，另一个参数是更新后的回调函数，如下面的用法：

this.setState({num:  1}, () => {
console.log('updated')
})

import { useEffect, useRef, useState } from  'react';

const  useXState = (initState) => {
	const [state, setState] = useState(initState);
	let  isUpdate = useRef();
	const  setXState = (state, cb) => {
		setState(prev  => {
		isUpdate.current = cb;
		return  typeof  state === 'function' ? state(prev) : state;
	})
}

useEffect(() => {
	if(isUpdate.current) {
		isUpdate.current();
	}
})

return [state, setXState];
}
export  default  useXState

笔者利用useRef的特性来作为标识区分是挂载还是更新，当执行setXstate时，会传入和setState一模一样的参数，并且将回调赋值给useRef的current属性，这样在更新完成时，我们手动调用current即可实现更新后的回调这一功能，是不是很巧妙呢？

作者：徐小夕
链接：https://www.imooc.com/article/301277
来源：慕课网
本文原创发布于慕课网，转载请注明出处，谢谢合作