用于动画前测量的 useLayoutEffect

有时，元素在首次渲染时会明显跳动或闪烁，之后才稳定到正确位置。通常，这是因为您在浏览器已经绘制元素后才测量或重新定位它。

用户会在一帧中看到错误的位置，随后看到突然的修正，这看起来就像出了问题。

useEffect 会在浏览器绘制之后运行。因此，如果您在 useEffect 中读取测量值并更新 DOM，用户已经看到了尚未校正的那一帧，然后您的更改才会生效。

对于必须对用户不可见的视觉定位来说，绘制后的时序已经太晚了。

useLayoutEffect 会在 React 修改 DOM 后、浏览器绘制前同步运行。您在其中进行的任何 DOM 读取或写入，都会在用户看到第一帧之前完成。

因此，对于必须立即显示为正确状态的测量和定位，它是合适的工具。

在 useLayoutEffect 中，您可以使用 ref.current.getBoundingClientRect() 读取元素布局，在开始动画前获取它的位置和尺寸。

由于这会在绘制前运行，您可以同时完成测量并应用起始变换，而不会出现任何可见闪现。

FLIP 代表 First（初始）、Last（最终）、Invert（反转）和 Play（播放）。您先记录元素的初始位置，让它移动到最终位置；然后应用变换进行反转，使它在视觉上回到初始位置；最后移除变换，让它播放到最终位置。

这样，即使实际布局已经瞬间跳变，您仍然只使用开销较低的 transform 来为布局变化添加动画。

关键的读取操作发生在 useLayoutEffect 中：在更改前获取初始矩形，在更改后获取最终矩形，然后计算差值。在绘制前完成这些操作，可以确保反转变换已就位后再显示任何内容。

两个矩形之间的差异可以为您提供用于反转的精确平移量和缩放比例。

您可以在 useLayoutEffect 中同步设置反转变换，然后在下一帧将其移除，让元素动画到自然位置。通常，您会使用 requestAnimationFrame 触发播放步骤。

由于反转变换是在绘制前应用的，用户永远不会看到元素处于未经处理的最终位置。

服务器上没有 DOM，因此 React 会记录一条警告，指出 useLayoutEffect 在服务器渲染期间不起作用。布局副作用只有在浏览器中才有意义。

这条警告表示，在没有可供测量的内容时，该副作用无法运行。

如果组件必须在服务器上运行，请将 useEffect 与 requestAnimationFrame 结合使用，在下一次绘制前完成测量；或者仅在浏览器中有条件地使用 useLayoutEffect。

这样可以避免警告，同时为非关键动画提供接近绘制前的时序。

高度动画是一个典型案例：在 useLayoutEffect 中测量折叠和展开后的高度，然后在明确的像素值之间添加动画，使过渡保持平滑。

由于 auto 高度无法添加动画，先测量实际高度就可以让您过渡到一个具体数值。

大多数情况下，请默认使用 useEffect。只有在您需要读取布局，并且必须在绘制前修改 DOM 以避免可见闪现时，才使用 useLayoutEffect。

过度使用它可能会损害性能，因为它会阻塞绘制，直到自身完成。

您了解了闪现问题源于绘制后才进行测量，了解了 useLayoutEffect 会在绘制前运行，也了解了 FLIP 技术如何使用开销较低的变换为布局变化添加动画。

您还看到了 SSR 警告，以及由 useEffect 和 requestAnimationFrame 组成的后备方案。