例子
之前和一个新同事一起开发时候,他写了一段类似这样的一段代码,我之前也写过类似的,因此觉得有必要记录一下
const [params,setParams] = useState({})
useEffect(() => {
return () => {
setParams({...params,pageNum:1})
};
}, []);//没在依赖数组中添加params
复制代码
这显然是不符合react hook标准的,useEffect的函数获取不到最新的值可能会导致一些场景的错误,可以用函数式useState(state => state)来获取到最新值或者使用useReducer,官网都有介绍清楚的,传送门;
useEffect 函数里的return与依赖数组的关系
useEffect(() => {
return () => {
console.log(123);
};
},[visible,list]);//每次visible、list更新都会触发return 匿名函数
复制代码
useEffect(() => {
if(visible&&list.length > 0)
return () => {
console.log(123);
};
},[visible,list]);//只有当组件销毁的时候触发return 匿名函数
复制代码
查阅源码可得
function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
debugger
var hook = updateWorkInProgressHook();
var nextDeps = deps === undefined ? null : deps;//更新后的依赖
var destroy = undefined;
if (currentHook !== null) {
var prevEffect = currentHook.memoizedState;
destroy = prevEffect.destroy;//return匿名函数,销毁组件的时候执行该函数
if (nextDeps !== null) {
var prevDeps = prevEffect.deps;//之前的依赖
if (areHookInputsEqual(nextDeps, prevDeps)) {//通过Object.js比较前后依赖数组,如果函数没用到过依赖数组,nextDeps、prevDeps一直不相等
hook.memoizedState = pushEffect(hookFlags, create, destroy, nextDeps);
return;
}
}
}
currentlyRenderingFiber$1.flags |= fiberFlags;
hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);
}
复制代码