第35节——useLayoutEffect——了解

一、概念

组件挂载或渲染完成后调用。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>
  )
}