react大佬进!useEffect是怎样运行的?

52 阅读1分钟

image.png 如图的代码示例,其在首次执行时,控制台会出现几次“进入程序”?在点击按钮后会出现几次“进入程序”?

小弟认为是两次,以点击按钮举例: 在点击按钮后触发setName(xiaoming),组件重新渲染,此时执行一次。 组件渲染完成后,因为name值发生改变导致useEffect执行,其内部执行了setName(daming)触发组件重新渲染,此时执行一次,并打印“effect”。 组件完成渲染后,因为name值发生了变化,useEffect会再次被调用,但此时setName传入的值与原值相同(均为daming),不再触发渲染,函数输出“effect”后结束。 按照分析,代码将输出两次“进入程序”与两次“effect” 但执行结果确大相径庭: (首次加载结果) image.png (点击按钮结果)

image.png 两种结果竟然后会输出三次“进入程序”,有没有大佬分析一下原因