一、概念

组件挂载或渲染完成后调用。useLayoutEffect使用方法、所传参数和useEffect完全相同。

他们的不同点在于，你可以把useLayoutEffect等同于componentDidMount、componentDidUpdate，因为他们调用阶段是相同的。而useEffect是在componentDidMount、componentDidUpdate调用之后才会触发的。

也就是说，当组件所有DOM都渲染完成后，同步调用useLayoutEffect，然后再调用useEffect。

useLayoutEffect永远要比useEffect先触发完成

二、作用

在触发useLayoutEffect阶段时，页面全部DOM已经渲染完成，此时可以获取当前页面所有信息，包括页面显示布局等，你可以根据需求修改调整页面。

请注意，useLayoutEffect对页面的某些修改调整可能会触发组件重新渲染。如果是对DOM进行一些样式调整是不会触发重新渲染的，这点和useEffect是相同的。

在react官方文档中，明确表示只有在useEffect不能满足你组件需求的情况下，才应该考虑使用useLayoutEffect。 官方推荐优先使用useEffect。

三、例子

其实呢，目前来看能够想到的场景都可以用useEffect来代替🤔

import React, { useState, useEffect, useLayoutEffect } from 'react';
export default function hook() {const [state, setState] = useState("hello world")// 会出现闪烁// useEffect(() => {//   let i = 0;//   while (i <= 1000000000) {//     i++;//   };//   setState("我是useEffect");// }, []);// 不会出现闪烁useLayoutEffect(() => {let i = 0;while (i <= 100000000) {i++;};setState("我是useLayoutEffect");}, []);return (<div><div>{state}</div></div>)
}