Javascript React：React如何确保在浏览器有机会绘制后调用useEffect？

useLayoutEffect的文档说明：

将刷新useLayoutEffect中计划的更新 同步地，在浏览器有机会绘制之前

useEffect的文档说明：

与componentDidMount和componentDidUpdate不同，函数传递了 在延迟事件期间，在布局和绘制之后使用Effect Fire

React如何检查布局和绘制何时发生，何时是调用useEffect的正确时间？

---

这是我经常使用的一种方法，在这种情况下使用setTimeout 0，但我想了解React是如何实现这一点的？（SetTimeout，requestAnimationFrame？

他们使用

postMessage

（与

requestAnimationFrame

结合使用）：

发现于

setTimeout

不能使用，因为如果递归使用，它将被限制

requestAnimationFrame

本身无法使用，因为它在重新绘制之前被触发。现在，如果您在重新绘制之前使用

postMessage

将消息发布到页面本身，那么该回调将在重新绘制之后直接运行

 const channel = new MessageChannel();

 channel.port1.onmessage = function() {
  console.log("after repaint");
 };

 requestAnimationFrame(function () {
   console.log("before repaint");
   channel.port2.postMessage(undefined);
 });

---

它们使用

postMessage

（与

requestAnimationFrame

结合使用）：

发现于

setTimeout

不能使用，因为如果递归使用，它将被限制

requestAnimationFrame

本身无法使用，因为它在重新绘制之前被触发。现在，如果您在重新绘制之前使用

postMessage

将消息发布到页面本身，那么该回调将在重新绘制之后直接运行

 const channel = new MessageChannel();

 channel.port1.onmessage = function() {
  console.log("after repaint");
 };

 requestAnimationFrame(function () {
   console.log("before repaint");
   channel.port2.postMessage(undefined);
 });

---

我只是浏览了一下react的来源，仍然找不到相关的部分。。。我只找到了反应域。我只是浏览了反应源，仍然找不到相关部分。。。我所发现的只是

ReactDOM.\uuu SECRET\uu internal\uu don\uu USE\uu或\uu YOU\u WILL\uu fire\uu

：）setTimeout有什么问题？是否存在这样一种场景，我们希望递归调用此功能？如果它节流，“重新绘制后”调用是否会延迟？但是我们是否仍然可以确定setTimeout会在绘制之后发生？setTimeout回调与绘制无关，这就是requestAnimationFrame的用途。但是它不能像

postMessage

那样使用，因为

setTimeout（callback，0）

会被限制为几毫秒。setTimeout会有什么问题？是否存在这样一种场景，我们希望递归调用此功能？如果它节流，“重新绘制后”调用是否会延迟？但是我们是否仍然可以确定setTimeout会在绘制之后发生？setTimeout回调与绘制无关，这就是requestAnimationFrame的用途。但是，它不能像

postMessage

那样使用，因为

setTimeout（callback，0）

会被限制为几毫秒。