React Native中useEffect于渲染后执行，默认状态值会短暂显示吗？

结论 #

确实会先短暂显示默认值 default message，哪怕持续时间只有微秒级人眼无法感知，这个渲染时序是客观存在的，慢放屏幕录制内容可以观测到切换过程。

具体渲染时序说明 #

React 组件挂载的完整流程严格遵循以下顺序：

• 首次执行组件函数，useState 初始化状态值为 default message，本次渲染返回的 JSX 中 <Text> 绑定的内容就是默认值
• React 进入提交阶段，将计算好的视图差异同步到原生端，原生系统完成第一帧绘制，此时屏幕上显示的是 default message
• 提交阶段全部完成、视图已经上屏后，才会执行空依赖的 useEffect 回调，调用 setMessage 更新状态为 new message
• 状态变更触发组件二次渲染，本次返回的 JSX 绑定内容为 new message，再次走提交、上屏流程后才会更新显示内容

补充：如何避免默认值闪现 #

如果希望首屏直接显示 new message 完全看不到默认值，可以把初始化状态直接设为目标值，或者把状态更新逻辑放到 useLayoutEffect 中：useLayoutEffect 的执行时机是在提交阶段完成后、视图实际绘制到屏幕之前，此时更新状态会被 React 合并到首次上屏的内容中，不会出现两次绘制。

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