useLayoutEffect 怎么解决 UI 闪烁？为什么比 useEffect 更快？

在React开发中，当DOM更新与浏览器渲染节奏不同步时，就会出现UI闪烁现象。这种现象通常发生在需要立即应用布局变化的场景中，例如：
元素尺寸突变时的布局抖动
动态内容加载时的位置跳变
交互反馈的视觉延迟

使用useLayoutEffect可以精确控制DOM修改时机，在浏览器执行绘制之前完成关键操作，从而避免用户看到中间状态。

使用useEffect时：
1. React提交DOM更新
2. 浏览器执行绘制
3. 副作用代码执行
4. 触发二次渲染

使用useLayoutEffect时：
1. React提交DOM更新
2. 立即执行副作用代码
3. 单次绘制完成

React Hooks执行时机对比图

useEffect：异步执行于绘制之后，可能看到中间状态
useLayoutEffect：同步执行于绘制之前，保证最终状态一致性

场景	推荐Hook	原因
布局测量	useLayoutEffect	需要精确的DOM尺寸
数据获取	useEffect	避免阻塞渲染
动画起始状态	useLayoutEffect	防止初始帧闪烁

如参考案例所示，当白色文字与背景颜色相近时：
“`jsx
// 错误示例
useEffect(() => {
element.style.color = ‘fff’
}, [])

// 正确方案
useLayoutEffect(() => {
element.style.backgroundColor = ‘333’
element.style.color = ‘fff’
}, [])
“`
解决方案要点：
1. 在DOM更新阶段同步设置背景色
2. 使用CSS-in-JS方案管理样式依赖
3. 采用对比度检测工具预防颜色冲突

对于动态内容容器，推荐组合使用：
“`jsx
useLayoutEffect(() => {
const calculateSize = () => {
container.style.width = `${parent.offsetWidth}px`
textElement.style.lineHeight = `${container.offsetHeight/3}px`
}

calculateSize()
window.addEventListener(‘resize’, calculateSize)

return () => window.removeEventListener(‘resize’, calculateSize)
}, [])
“`