React中的阻塞与非阻塞效果: useEffect是否隐式异步运行？

Question

考虑一下React中useEffect的这两种用法：

useEffect(() => {
  setSomeState(complexComputation(someDependency));
}, [someDependency]);

vs

useEffect(() => {
  setTimeout(() => {
    setSomeState(complexComputation(someDependency));
  }, 0);
}, [someDependency]);

它们实际上做了同样的事情，但技术上的区别是，在第一种情况下传递给useEffect的函数是阻塞的，而在第二种情况下是异步的。

从React呈现流的角度来看，这两种用法有什么不同吗？React是在内部负责效果的异步调度，还是应该手动执行同步/代价高昂的效果？

为了澄清下面的评论:我最初在问这个问题的时候做了this mistake。

Answer 1

1. 我们可以很容易地在useEffect()钩子中进行异步调用。

1. useEffect()内的回调函数不能为async，因此回调不能使用async-await，因为useEffect()不能返回promise，而这是每个async function默认返回的：

useEffect(async ()=>{ }) //这将返回错误，无法在中工作

现在来回答你的问题：

useEffect(() => {
  setTimeout(() => {
    setSomeState(complexComputation(someDependency));
  }, 0);
}, [someDependency]);

这里的要点是，我们的useEffect()钩子最初将运行，setTimeout()函数只是传递给浏览器的Web-API，Timer正常启动，只有当所有代码在call-stack上执行完后，setTimeout中的回调才会执行。

运行以下代码进行检查。

useEffect(() => {
 console.log("Line one")
  setTimeout(() => {
    setSomeState(complexComputation(someDependency));
    console.log("line two");
  }, 3000);
  console.log("Line three");
}, [someDependency]);



Output will be:
Line one
Line Three
Line two // after all other synchronous consoles are executed :)

问题不是关于"what running of useEffect() asynchronously or synchronously mean"，而是关于useEffect()首先在什么场景下运行，它在这两个场景中都运行。

i-e.

someDependency)，useEffect(()=>{} )