[历史博客]useEffect和useLayoutEffect，有何不同

[z0nka1]

来自我的早期博客，出处：https://z0nka1.github.io/

在React里面，有这么两个hook：useEffect和useLayoutEffect，他们的作用很相似。

但他们并不是完全相同，本文通过实例的对比，让你清楚看到他们之间不一样的地方。

useEffect和useLayoutEffect的不同之处

这一切的不同，都是在————时间上。

useEffect：

useEffect是异步的。换句话说，它不会阻塞其他的任务。

看起来就像这样：

1. 你以某种方式触发页面渲染（比如setState）
2. React渲染页面
3. 页面更新（视觉上）
4. 运行useEffect

useLayoutEffect

而useLayoutEffect是同步的，或者说，阻塞？React是执行完useLayoutEffect，然后才会去更新页面的。

看起来就像这样：

1. 你以某种方式触发页面渲染（比如setState）
2. React渲染页面
3. 运行useLayoutEffect，然后React等它执行完
4. 页面更新（视觉上）

什么时候用useEffect，什么时候用useLayoutEffect？

这么说吧，90%的情况都是使用useEffect。

这里有两个在线实例，去玩一下，相信你就会知道什么时候用哪个了：

• 使用useEffect的例子
• 使用useLayoutEffect的例子

在页面上点击，看到区别了吗？

用useEffect，页面会闪一下，而useLayoutEffect却不会有这种情况。

以上就是本文全部内容了，感谢阅读！