问题描述

下面代码会执行几次打印？

import { useState } from 'react'

function App() {
	const [num, updateNum] = useState(0)
	
	useEffect(() => {
		updateNum(1)
	})

	console.log(num)
	
	return <div>{num}</div>
}

分析

两次？还是三次？不管几次，我们先分析一下，我们不是猜的，有理有据的。可能有的小伙伴看到的第一感觉就是，useEffect 没有依赖，不是会无限执行吗？我觉得思路是解决这道题的关键点。
首先我们知道触发组件更新的方式要么就是 state 发生变化，要么就是 props（包括 context 等）发生变化。

  1. 第一次打印

打印结果：0
分析：函数自然执行，第一次打印 0，没有问题

  1. 第二次打印

打印结果：1
分析：useEffect 执行，updateNum 把 num 更新为 1，触发第二次更新，没有问题

  1. 第三次打印

打印结果：1
分析：这里可能有人不能理解，为啥还有第三次呢？因为 useEffect 没有依赖，会一直执行，但是为什么没有一直执行呢？因为我们设置 num 的值固定是 1，也就是第 3 次以后，num 就没有发生变化了，他一直是 1，所以就不会再更新了。

这时候可能有人就有这样的疑问了，为啥第三次执行的时候 num 的值 和 第二次执行的时候是一样的，为什么他还会打印呢？第四次和第三次不也是 1 吗？第 n 和 n + 1 次不也是 1 吗？

第 2 次和第 3 次是开始比较是否相等的第一次，第三次执行的时候，react 并不知道 num 是否发生了改了，是在比较之后才知道没有发生改变，就打印了第三次，第三次执行之后就不会执行啦。

不知道有没有说清楚呀，如果还想深入探索的话，可以翻翻 react 的源码，看能不能找到自己想要的答案嘞。我个人对react 源码没有很感冒，我总感觉除了面试好像没有什么太大的作用。能清楚大致的流程就好了，把更多的时候放在自己喜欢、感兴趣的事情上也很好呀。