React 第十九节 useLayoutEffect 用途使用技巧注意事项详解

1、概述

useLayoutEffect 是useEffect 的一个衍生版本 ，只是他们的执行时机不同

useLayoutEffect 用于在DOM更新执行完成之后 ，浏览器渲染绘制之前执行，这会阻塞 浏览器的渲染；
useEffect 的执行时机是在组件首次渲染和更新渲染之后异步执行 的，这就意味着 useEffect 的执行并不会阻塞组件的渲染，也不会影响到用户的交互体验；

由于useEffect 执行的的异步操作，那么在其副作用函数中执行，数据请求 、DOM操作 、定时任务 ，即使有大量的计算耗时，也不会让用户感觉到界面卡顿现象；

而useLayoutEffect 执行的是同步操作，不适用于大量耗时的进程 在副作用函数中执行，否则会是界面显的非常卡顿，从而影响用户的体验感；

useEffect具体使用详情

2、写法

useLayoutEffect(setup, dependencies)

第一个参数 ：setup，处理副作用的函数，在将组件首次添加到 DOM 之前，React 将运行 setup 函数。在每次因为依赖项变更而重新渲染后，React 将首先使用旧值运行 cleanup 函数 （如果你提供了该函数），然后使用新值运行 setup 函数。在组件从 DOM 中移除之前，React 将最后一次运行 cleanup 函数。
第二个参数：依赖项数组，与 useEffect的依赖项一样为可选项；

useLayoutEffect(() => {
    console.log('=设置函数==')
    // 用于根据依赖项变化而执行的逻辑
    return () => {
        // 清理函数，组件卸载移除时，执行的逻辑
    }
},[name])

3、用法示例

当我们使用 useEffect 将一个圆形 由直径 10px,变大到 直径为200px时；会看到 图形的变化整个过程 ；

而我们使用 useLayoutEffect 时，直接看到 的就是 直接为 200px 的圆形 ，不会看到图片变化过程，给用户的感觉视图的白屏时间更长，体验不好；

/* index.less文件 */
.base-class{
    display: block;
    width: 10px;
    height: 10px;
    background-color: #f00;
    border-radius: 50%;
    position:relative;
}
.area-box{
    width: 200px;
    height: 200px;
}

3.1 使用 useEffect Hook时，

是异步执行，不会阻塞浏览器渲染，故可以看见图形变化过程；

import {useState, useEffect } from 'react'
import './index.less'


export default function MyLayoutEffect() {
    const [area, setArea] = useState(false)
    const handleChangeArea = () => {
        setArea(false)
    }
    // 使用时间延迟
    let now = performance.now()
    while (performance.now() - now < 200) {}
    useEffect(() => {
        setArea(true)
    }, [area])
  return (
    <div>
        <span className={area ? 'base-class area-box' : 'base-class'}>useEffect圆的面积</span>
        <hr />
        <p>areaLayout:---{areaLayout}----</p>
        <hr />  
        <button onClick={handleChangeArea}>改变圆形面积</button>
    </div>
  )
}

3.2、使用 useLayoutEffect 时，

无论我们是点击按钮改变原型大小，还是初次加载，屏幕中始终 的 直径为 200px 的圆形；这是因为 useLayoutEffect 的状态更新，会在屏幕渲染之前执行，进而导致阻塞渲染，而一直看到都是大图

import {useState, useLayoutEffect} from 'react'
import './index.less'


export default function MyLayoutEffect() {

    const [areaLayout, setAreaLayout] = useState(false)
    const handleChangeArea = () => {
        setAreaLayout(false)
    }
    let now = performance.now()
    while (performance.now() - now < 200) {}

    useLayoutEffect(() => {
        setAreaLayout(true)
    }, [areaLayout])

  return (
    <div>

        <p>areaLayout:---{areaLayout}----</p>
        <span className={areaLayout ? 'base-class area-box' : 'base-class'}>useLayoutEffect</span>
        <hr />  
        <hr />
        <button onClick={handleChangeArea}>改变圆形面积</button>
    </div>
  )
}

4、使用场景

1、需要在屏幕渲染完成之前 获取元素DOM 的位置尺寸，同步进行调整

2、防止闪屏 ，因useLayoutEffect 会在浏览器渲染前计算好 元素的位置大小 ，故不会像 useEffect，会看见视图元素 位置大小变化过程，但是如果时间过短 ，会给用户一种闪屏 的错觉；