useEffect和useLayoutEffect区别-技术圈

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同。

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

尽可能使用标准的 useEffect 以避免阻塞视觉更新。

提示

如果你正在将代码从 class 组件迁移到使用 Hook 的函数组件，则需要注意 useLayoutEffect 与 componentDidMount、componentDidUpdate 的调用阶段是一样的。但是，我们推荐你一开始先用 useEffect，只有当它出问题的时候再尝试使用 useLayoutEffect。

const BlinkyRender = () => {  const [value, setValue] = useState(0);
  useLayoutEffect(() => {    if (value === 0) {      setValue(10 + Math.random() * 200);    }  }, [value]);
  console.log('render', value);
  return (    <div onClick={() => setValue(0)}>      value: {value}    </div>  );};

当点击div时，状态立即改变(value重置为0)，这将重新Render组件，然后运行Effect——将值设置为某个随机数，并再次重新Render。

也就是是两次Rerender会快速连续发生。分别换用useLayoutEffect和useEffect观察有什么不同。

你会发现useLayoutEffect的版本会在组件render两次的情况下仅在视觉上更新一次。而useEffect版本在视觉上也会呈现两次，所以会看到闪烁，从0闪烁变成对应的随机数。