详解react useEffect 和 useLayoutEffect区别

useEffect

引用官方

使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。

useLayoutEffect

引用官方

其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

简单来说就是：
useLayoutEffect:是在所有DOM变更之后浏览器渲染之前调用，既同步调用
useEffect:是在组件渲染到屏幕之后执行，既异步调用

useEffect

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const BlinkyRender = () => {
  const [value, setValue] = useState(0);
  useEffect(() => {
    if (value === 0) {
      setValue(10 + Math.random() * 200);
    }
  }, [value]);
  console.log("render", value);
  return (
    
 setValue(0)}>value: {value}
  );
};
ReactDOM.render(
  ,
  document.querySelector("#root")
);

点击div的时候，先是将value state设置为0，触发渲染，然后执行useEffect在设置为一个随机数，再次触发渲染，明显看到会有闪烁，虽然短暂但是不友好
执行步骤：
1、click setState （value）
2、虚拟 DOM 设置到真实 DOM 上
3、渲染
4、执行useEffect回调

useLayoutEffect

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const BlinkyRender = () => {
  const [value, setValue] = useState(0);
  useLayoutEffect(() => {
    if (value === 0) {
      setValue(10 + Math.random() * 200);
    }
  }, [value]);
  console.log("render", value);
  return (
    
 setValue(0)}>value: {value}
  );
};
ReactDOM.render(
  ,
  document.querySelector("#root")
);

点击div的时候，先是将value设置为0，然后在设置为一个随机数，最后渲染
执行步骤：
1、click setState （value）
2、虚拟 DOM 设置到真实 DOM 上
3、执行useLayEffect回调
4、渲染