React中为何需将useState调用的函数包裹在匿名函数中？

核心差异：执行时机不同 #

1. 直接传函数调用结果：useState(generateRandomColor()) #

• 组件**每次渲染（包括重渲染）**时，JavaScript引擎会先执行generateRandomColor()，把返回的颜色值作为参数传给useState。
• 但React的useState钩子只有在组件首次挂载时会使用这个初始值，后续重渲染会直接复用之前保存的状态值，完全忽略这次传入的参数。
• 结果就是：不管状态有没有变化，generateRandomColor()都会在每次重渲染时白跑一遍，复杂逻辑会直接拖慢性能。

2. 传函数本身/匿名函数：useState(() => generateRandomColor()) 或 useState(generateRandomColor) #

• 这里传给useState的是函数引用，不是函数执行结果，所以JavaScript引擎不会立即执行generateRandomColor。
• React内部会做判断：只有在组件首次挂载时，才会调用这个传入的函数，用它的返回值作为初始状态；后续重渲染时，直接跳过这个函数的调用，复用已有的状态。
• 结果就是：复杂逻辑只执行一次，避免了不必要的性能损耗。

JavaScript底层的执行逻辑 #

• 当你写generateRandomColor()时，这是函数调用表达式，JS引擎会优先执行这个表达式，拿到返回值后再把值传给useState——这个过程和useState的逻辑无关，是JS语法本身的执行顺序。
• 当你直接传generateRandomColor或者() => generateRandomColor()时，这是把函数对象作为参数传递，JS引擎不会执行这个函数，只是把它的引用交给useState，由React决定什么时候执行。

React钩子的设计逻辑 #

React的useState钩子专门做了优化：

• 如果传入的是普通值（字符串、数字、对象等），就直接用它做初始状态，但每次渲染都会重新计算这个值（哪怕没用）。
• 如果传入的是一个函数，就把它标记为“初始状态生成函数”，只在首次渲染时调用一次，后续不再执行，以此避免重复计算。

内容的提问来源于stack exchange，提问作者user1261710