hook闭包和依赖可以这样理解吗

来源:8-2 ⽤useRef实现useDocumentTitle - useRef与Hook 闭包详解(下)

津白

2021-02-04

老师在你举的testClosure例子里面,unmount会log出来第一次执行的值的原因是在于它使用的是message,而这个message是存在于当时那个effect的闭包中,所以一直没有改变。如果unmount引用的是num,那么最后log出来的就会是最新的值。我的问题是是否也可以这样理解useEffect中unmount的闭包与依赖:就是useEffect实际上也用一个小本本(就像message)抄了一份所使用的所有变量,只有依赖项变了才会重新执行useEffect,导致小本本被重写。
testClosure

const testClosure = () => {
  let num = 0;

  const effect = () => {
    num += 1;
    const message = `num value in message:${num}`;

    return function unmount() {
      console.log(message);
    };
  };

  return effect;
};

useEffect

  useEffect(() => {
    return () => {
      console.log("卸载值:", num);
    };
  }, []);
写回答

1回答

Nolan

2021-02-07

对的,可以这么理解,useEffect每次在依赖变化的时候都会重新执行一次,理论上来说useEffect中用到的所有变量都会放在依赖里,所以每次useEffect都可以拿到最新的值(重写小本本)

2
1
津白
非常感谢!
2021-02-08
共1条回复

React17+Hook+TS4 优质实践,仿 Jira 企业级项目

解锁 React17 高阶用法,轻松应对大型复杂长周期项目

2691 学习 · 1236 问题

查看课程