useLayoutEffect（布局副作用）

布局副作用

• useEffect 在浏览器渲染完成后执行

• useLayoutEffect 在浏览器渲染前执行

特点：

• useLayoutEffect 里面的任务最好影响了Layout（布局）,否则就不要放到这里面占用时间

• useLayoutEffect 总是比 useEffect 先执行

  注意：为了用户体验最好优先使用useEffect（优先渲染）

代码1演示（打印出的时间不同）

import React, {useState, useRef, useLayoutEffect, useEffect} from "react";
import ReactDOM from "react-dom";

function App() {
  const [n, setN] = useState(0)
  const time = useRef(null)
  const onClick = ()=>{
    setN(i=>i+1) 
    time.current = performance.now()//时间打点
  }
  useLayoutEffect(()=>{ // 改成 useEffect 试试
    if(time.current){
      console.log(performance.now() - time.current)
    }
  })
  return (
    <div className="App">
      <h1>n: {n}</h1>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
复制代码

代码2演示（先打印useLayoutEffect再打印useEffect）

import React, {useState, useLayoutEffect, useEffect} from "react";
import ReactDOM from "react-dom";

function App() {
  const [n, setN] = useState(0)
  const onClick = ()=>{
    setN(i=>i+1)
  }
  useEffect(()=>{
    console.log("useEffect")
  })
  useLayoutEffect(()=>{ // 改成 useEffect 试试
    console.log("useLayoutEffect")
  })
  return (
    <div className="App">
      <h1>n: {n}</h1>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
复制代码