需要对输出进行解释。需要理解钩子中的顺序& re呈现工作
我无法理解在调用set(state)时效果和重新呈现工作的顺序。我知道，默认情况下，每个呈现效果都会运行。但在这种情况下，无法应用相同的原则来匹配生成的输出。
function Example() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
console.log("<===rendering===>");
useEffect(() => {
console.log("Running Effects")
Promise.resolve(1)
.then(() => {
console.log("BEFORE SET flag", flag);
setFlag(true);
console.log("AFTER SET flag", flag);
console.log("flag4 SET count", count);
setCount(20);
console.log("AFTER SET count", count);
})
}, [flag, count]);
return (
<div>
Hello
</div>
);
}输出
- <===rendering===>
- 运行效果
- 设置标志为false之前
- <===rendering===>
- 后设置标志为false
- 设置前计数为0
- 运行效果
- <===rendering===>
- 设置后计数0
- 在SET标志true之前
- 运行效果
- <===rendering===>
- 在SET标志true之后
- 设置前计数为0
- 设置后计数0
- 在SET标志true之前
- 在SET标志true之后
- 在设定前计数20
- 设置后计数20
回答 1
Stack Overflow用户
发布于 2019-05-23 20:25:51
好的，下面是所发生的事情：Promise.resolve().then基本上是将然后块的执行排队到效应阶段之后，这就是为什么在本例中，setState立即触发一个新的呈现，然后，在下一个效果开始之前，然后继续执行then块。
我修改了您的代码，以帮助您更好地理解console.log属于每个呈现。
https://codesandbox.io/s/weathered-lake-heh9j
第一次呈现启动
#1 "<===rendering===>" false 0第一次呈现结束呈现
第一次呈现效果启动
#1 "Running Effects" false 0第一次呈现效果结束
第一个呈现Promise.then块启动
#1 "BEFORE SET flag" false 0第一次呈现setCount立即调用下一次呈现，因为我们已经完成了效果阶段第二次呈现启动
#2 "<===rendering===>" true 0第二次呈现结束呈现
第一个呈现Promise.then块继续
#1 "AFTER SET flag" false 0
#1 "BEFORE SET count" false 0第一次呈现setCount立即调用第三次呈现，因为我们已经完成了效果阶段，但是在呈现反应之前，第二次呈现挂起的效果
第二呈现效果启动
#2 "Running Effects" true 0第二呈现效果结束
第三次呈现启动
#3 "<===rendering===>" true 20第三次呈现结束呈现
第一个呈现Promise.then块继续
#1 "AFTER SET count" false 0第一次呈现Promise.then块结束=>首先呈现所有已完成的
第二个呈现Promise.then块启动
#2 "BEFORE SET flag" true 0第二次呈现setCount立即调用第四次呈现，因为我们已经完成了效果阶段，但是在呈现之前，第三次呈现挂起的效果会做出反应。
第三个呈现效果启动
#3 "Running Effects" true 20第三次渲染效果结束
第四次呈现启动
#4 "<===rendering===>" true 20第四次呈现结束，由于计数和标志没有更改，因此没有产生效果。
第二次呈现Promise.then块继续
#2 "AFTER SET flag" true 0
#2 "BEFORE SET count" true 0
#2 "AFTER SET count" true 0第二次呈现Promise.then块结束
第三次呈现Promise.then块启动
#3 "BEFORE SET flag" true 20
#3 "AFTER SET flag" true 20
#3 "BEFORE SET count" true 20
#3 "AFTER SET count" true 20第三次呈现Promise.then块结束
下面的修改示例可能有助于进一步了解react所做的事情。
https://codesandbox.io/s/competent-wozniak-syr0s
请注意，当您单击set标志true按钮时，不会触发任何呈现，因为react比较了新的和以前的状态，可能决定不呈现。
https://stackoverflow.com/questions/56279911
复制相似问题
腾讯云开发者
