reactjs - useEffect 中有多个 useState，执行顺序

Question

由于第一个 useState 渲染后会发生什么？执行是否在第二个 useState 处立即开始？

   import React, { useState, useEffect } from 'react';
    const [var1, setVar1] = useState();
    const [var2, setVar2] = useState();
    ...
    useEffect(() => {
        if (var1) {
          setVar2('abc')
          setVar1('zyx')
        }
    }, [var1]);

Answer 1

如果我正确理解你的问题:
useEffect 's 在渲染之后运行。所以执行将是:

使用状态 1

使用状态 2

返回

useEffect(仅在您的依赖项更改时运行)

重新渲染

在您的 useEffect 内, setVar2 setter 将在第一个之前被调用。但请记住，设置状态是异步的，因此第一个执行并不意味着第一个完成。

要回答有关效果内部执行顺序的更具体问题，请考虑示例中的控制台日志:

const TestEffect= (props) => {
  const [test, setTest] = React.useState();
  const [test2, setTest2] = React.useState();

  React.useEffect(() => {
    console.log('effect was called')

    setTest2('test2');
    console.log('set test 2 called')

    setTest('test');
    console.log('set test 1 called')
  }, [test])

  console.log('render')
  return <div>Test</div>;
}

// Output:

// render
// effect was called
// set test 2 called
// set test 1 called
// render
// effect was called
// set test 2 called
// set test 1 called
// render