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的时候,触发重新声明该函数做的一下操作
- 自己的理解,如果各位大神能帮我理解请评论区指正