hook 的渲染，你了解吗

前端e站

已于 2022-01-24 11:19:03 修改

阅读量822

点赞数 2

分类专栏： React Hooks React JavaScript 文章标签： vue.js react.js 前端

于 2022-01-24 08:30:00 首次发布

本文链接：https://blog.csdn.net/qq_39606853/article/details/122660299

版权

JavaScript 同时被 3 个专栏收录

30 篇文章 2 订阅

订阅专栏

React

19 篇文章 2 订阅

订阅专栏

React Hooks

10 篇文章 2 订阅

订阅专栏

组件hook挂载时，先执行子组件 useEffect，再执行父组件 useEffect；

组件卸载时，分两种情况：

场景一:发生组件的卸载时，先执行父组件 hook，再执行子组件 hook；

// 装载过程是这样的的
// 子组件事件装载 => 子组件装载 => 父组件装载
// 卸载过程是这样的
// 子组件卸载 => 子组件事件卸载 => 父组件卸载

// 父组件
export default () => {
const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("父组件装载");
    return () => {
      console.log("父组件卸载");
    };
  });
  return (
    <div>
      <p>{count}</p>
      <Button
        onClick={() => {
          setCount(() => {
            return count + 1;
          });
        }}
      >
        +
      </Button>
      {count >= 2 && count <= 3 ? <Child2 count={count} /> : <span>占坑</span>}
    </div>
  );
};
// 子组件
const Child2: FC<IProps> = (props) => {
  useEffect(() => {
    console.log("子组件装载");
    return () => {
      console.log("子组件卸载");
    };
  });
  return (
    <div>
      Child2: {props.count}
      <Button />
    </div>
  );
};
// 子组件中 Button
const Button = () => {
  useEffect(() => {
    console.log("子组件事件装载");
    return () => {
      console.log("子组件事件卸载");
    };
  });
  return <div>Button</div>;
};

场景二：只发生渲染时，先执行子组件 hook，再执行父组件 hook；

// 装载过程是这样的的
// 子组件事件装载 => 子组件装载 => 父组件装载
// 卸载过程是这样的
// 子组件事件卸载 => 子组件卸载 => 父组件卸载

// 父组件
export default () => {
const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("父组件装载");
    return () => {
      console.log("父组件卸载");
    };
  });
  return (
    <div>
      <p>{count}</p>
      <Button
        onClick={() => {
          setCount(() => {
            return count + 1;
          });
        }}
      >
        +
      </Button>
      <Child count={count} />
    </div>
  );
};
// 子组件
const Child: FC<IProps> = (props) => {
  useEffect(() => {
    console.log("子组件装载");
    return () => {
      console.log("子组件卸载");
    };
  });
  return (
    <div>
      Child: {props.count}
      <Button />
    </div>
  );
};
// 子组件 Button
const Button = () => {
  useEffect(() => {
    console.log("子组件事件装载");
    return () => {
      console.log("子组钮事件卸载");
    };
  });
  return <div>Button</div>;
};

总的来说，组件会先标记要卸载的组件，先执行要卸载的组件 hook（unmount），再执行仅渲染的组件 hook （unmount）。