useState直接初始化与useEffect中赋值的差异及渲染周期问题

先看两种对比写法：

写法一：直接传入初始值 #

const [state, set_state] = useState(1);

写法二：空初始值+useEffect后置赋值 #

const [state, set_state] = useState();
useEffect(() => {
  set_state(1);
}, [])

核心差异与额外渲染问题 #

1. 渲染次数明确不同

   • 写法一：组件首次渲染时，state直接被初始化为1，整个初始化阶段仅触发1次渲染，渲染出的UI直接基于正确的state值。
   • 写法二：组件先以state=undefined完成第一次渲染，渲染结束后触发空依赖的useEffect，调用set_state(1)会立刻触发第二次渲染，这次才会用state=1渲染正确UI。

2. UI状态存在中间空白期
   写法二会出现短暂的不符合预期的中间状态：第一次渲染时state为undefined，如果组件有依赖state的条件渲染、数据展示逻辑，可能会显示空白、默认占位或错误内容，随后闪跳到正确状态；而写法一从初始渲染就有正确的state，不会出现这种闪烁。

3. 性能开销差异
   写法二多出来的那次渲染虽然在简单组件中影响不大，但复杂组件或高频渲染场景下，额外的渲染会增加不必要的性能开销。如果初始值是静态固定值（比如例子里的1），完全没必要用这种写法。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture