为什么以下反应代码呈现三个时间

Question

为什么下面的react代码渲染三次，react渲染的机制是什么

import React  from 'react';
const Toggle = (props) => {
const [ num ,setNumber ] = React.useState(0)
setTimeout(() => {
setNumber(1)
}, 0)
console.log('render'); // render three times ?
return <button >{ console.log(num) } {num}</button>
};
export default Toggle;

下面的反应代码渲染一次

import React  from 'react';
const Toggle = (props) => {
const [ num ,setNumber ] = React.useState(0)
setTimeout(() => {
setNumber(0) // change
}, 0)
console.log('render'); // render one times ?
return <button >{ console.log(num) } {num}</button>
};
export default Toggle;

Answer 1

正如你所知，Node是异步javascript，也是非阻塞的。

所以它首先执行console.log('render');，之后，当setTimeout时间到来时，它从setTimeout(() => {逐行执行，在setTimeout中有一个状态改变，setNumber(1)为此整个程序再次执行。这是原因,或许看到console.log('render');执行三次。如果您增加setTimeout时间，您可以更好地理解。

那么第二个代码console.log('render');背后的原因只是一个是react虚拟dom。