useEffect和useLayoutEffect区别
布局副作用useEffect在浏览器渲染实现后执行useLayoutEffect在浏览器渲染前执行特点：useLayoutEffect总是比useEffect先执行useLayoutEffect外面的工作最好影响了Layout（布局）**留神：为了用户体验最好优先应用useEffect**useEffect（副作用）
基本上90%的状况下,都应该用这个,这个是在render完结后,你的callback函数执行,然而不会block browser painting,算是某种异步的形式吧,然而class的componentDidMount 和componentDidUpdate是同步的,在render完结后就运行,useEffect在大部分场景下都比class的形式性能更好.
useLayoutEffect（布局副作用）
这个是用在解决DOM的时候,当你的useEffect外面的操作须要解决DOM,并且会扭转页面的款式,就须要用这个,否则可能会呈现呈现闪屏问题, useLayoutEffect外面的callback函数会在DOM更新实现后立刻执行,然而会在浏览器进行任何绘制之前运行实现,阻塞了浏览器的绘制.
可能讲的不是很分明,看个例子吧
import React, { useEffect, useLayoutEffect, useRef } from "react";import TweenMax from "gsap/TweenMax";import './index.less';const Animate = () => { const REl = useRef(null); useEffect(() => { /*上面这段代码的意思是当组件加载实现后,在0秒的工夫内,将方块的横坐标地位移到600px的地位*/ TweenMax.to(REl.current, 0, {x: 600}) }, []); return ( <div className='animate'> <div ref={REl} className="square">square</div> </div> );};export default Animate;
能够分明的看到有一个一闪而过的方块.
改成useLayoutEffect试试:
能够看出,每次刷新,页面根本没变动!