React 中的 useLayoutEffect 使用

概述

在 React Hooks 中，我们经常使用的一个 Hook 就是 useEffect，当依赖发生变化时，我们可以采取一系列的副作用操作，这些操作通常是请求接口，进行数据更新，或者是操作 Dom。但是，当操作 Dom 的时候，我们是希望在页面获取最新状态之前，也就是页面刷新之前获取数据，进行联动操作，那这样的副作用如何实现了，这就需要使用 useLayoutEffect Hook。

useLayoutEffect

要理解 useLayoutEffect，我们就需要区分其和 useEffect 的区别，名字大致一致，就可以理解其使用目的也大致一致，区别就在意 effect 的调用时间。useEffect 是在 Dom 也就是游览器屏幕已经渲染完状态之后，调用 effect，而 useLayoutEffect 是在游览器渲染数据之前调用 effect 方法，这就意味着我们可以及时操作一些 Dom 的数据，常见的是修改 Dom 的位置数据。

useLayoutEffect 使用方法

useLayoutEffect(setup, dependencies)

useLayoutEffect 使用方法是传入一个 effect 方法，也可以理解为 setup 为第一个参数，第二个参数接收依赖数组，根据数组的变化，即使调用 setup 方法。需要注意的是，useLayoutEffect 是有点性能上的瓶颈，如果在可以 useEffect 可以解决的情况下，应该首选 useEffect。