useState 取最新数据(同步方法)

1:把值传下去

  function changeState(val){
      setParams(val)
      nexFunction(val)
  }

2:使用useEffect监听state变化

  useEffect(()=>{
    //paramsData是某一个 paramsData变化就会被监听到,然后取值就算最新的paramsData

  },[paramsData])

3:通过传参的形式/回调函数(建议) — 自定义hook

1.通过传参的形式,将最新的值,传递给 fn
2.render 之后,在 useEffect 中获取
3.自定义一个 hook useSyncCallback

useSyncCallback 代码实现

import { useEffect, useState, useCallback } from 'react'

const useSyncCallback = callback => {
	const [proxyState, setProxyState] = useState({ current: false })
	const [params, setParams] = useState([])

	const Func = useCallback((...args) => {
		setParams(args)
		setProxyState({ current: true })
	}, [proxyState])

	useEffect(() => {
		if (proxyState.current === true) setProxyState({ current: false })
	}, [proxyState])

	useEffect(() => {
		proxyState.current && callback(...params)
	})

	return Func
}

export default useSyncCallback

使用 useSyncCallback

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
	setstate(2);
	fn(1,2); 
  };
  /** 将fn的方法传递给 useSyncCallback 然后返回一个新的函数 */
  const fn = useSyncCallback((val,val2) => {
	console.log(count);//输出最新的值
	console.log(val,val2)//输出传参的值
  });

  return (
	<div className="App">
	   <button onClick={handleClick}>点击</button>
	</div>
  );
}

export default App;

####### 个人理解:

  • 首先const fn 一开始只是常量,就算加了回调函数也是常量,这个时候的值因为state的改变触发render,所以fn里边的值是最新的。
  • 使用useSyncCallback包裹回调函数,可以把最新的值传出去,然后返回一个函数,这个时候fn就是一个函数,所以可以执行fn();
  • 至于fn();传值就 通过 callback(…params);把参数传给回调函数,所以在fn的回调函数里,就可以正常执行代码
  • useSyncCallback 里边的useEffect 和useCallback都是防止页面发生render的时候,触发重新声明该函数做的一下操作
  • 自己的理解,如果各位大神能帮我理解请评论区指正
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值