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在渲染后运行。所以执行将是：

• 使用状态1
• 使用状态2
• 返回
• useEffect（仅在依赖项发生变化时运行）
• 重新渲染

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

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

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