React中useEffect和useLayoutEffect的区别，什么时候使用useLayoutEffect

React 提供了 useLayoutEffect 和 useEffect 两个 hook，它们在使用方式上基本没什么区别，而且大部分场景都能达到相同的效果。那么这两者的区别是什么呢？何时使用 useLayoutEffect？本文将针对两者关键的区别进行讲解。

useEffect

我们先来看看 useEffect 的使用方式，它的作用是可以模拟组件的生命周期。

模拟 componentDidMount

useEffect 模拟 componentDidMount 生命周期很简单，只需要在 useEffect 的第二个参数里面传入一个空数组 [] 即可

Live Editor

function Example() { const [count, setCount] = useState(0); useEffect(() => { console.log("componentDidMount"); }, []); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("componentDidMount");
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Result

Loading...

模拟 componentDidUpdate

useEffect 模拟 componentDidUpdate 也很简单，只需要在 useEffect 第二个参数声明依赖项即可，例如

Live Editor

function Example() { const [count, setCount] = useState(0); useLayoutEffect(() => { console.log("componentDidUpdate"); }, [count]); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }

function Example() {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    console.log("componentDidUpdate");
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Result

Loading...

模拟 componentWillUnmount

只需要在 useEffect return 一个新的函数即可。

Live Editor

function Example() { const [count, setCount] = useState(0); useEffect(() => { console.log("componentDidMount"); return () => { console.log("componentWillUnmount"); }; }, []); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("componentDidMount");
    return () => {
      console.log("componentWillUnmount");
    };
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Result

Loading...

useEffect 和 useLayoutEffect 的本质区别

useEffect 和 useLayoutEffect 其实功能基本一样的，两者的本质区别是：

useEffect 和 useLayoutEffect 的本质区别就是在 useLayoutEffect 执行的时机是在 DOM 修改后同步触发。

先来看看下面的例子，我们来看下两者执行的时机：

通过上面例子可以看出，useEffect 和 useLayoutEffect 都是在状态变更之后才会执行的，并且 useLayoutEffect 比 useEffect 提前执行。

Live Editor

function Example() { const [count, setCount] = useState(0); useEffect(() => { console.log("useEffect"); }, [count]); useLayoutEffect(() => { console.log("useLayoutEffect"); }, [count]); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("useEffect");
  }, [count]);

  useLayoutEffect(() => {
    console.log("useLayoutEffect");
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Result

Loading...

总结

1. 官方推荐，绝大部分场景下使用 useEffect hook 即可，如果 useEffect 不满足需求，再尝试使用 useLayoutEffect hook。
2. useEffect 是异步非阻塞，useLayoutEffect 是同步阻塞。
3. useEffect 是在浏览器绘制之后执行，useLayoutEffect 是在 DOM 变更之后，浏览器绘制前执行
4. useLayoutEffect 会阻塞 DOM 的渲染，避免过度使用

如果您有什么看法或意见，欢迎通过右边的反馈悬浮框反馈

本文为原创，未经同意授权，禁止任何媒体或个人自媒体以及任何声明式转载

商业侵权必究，如需授权请联系340443366@qq.com

原文链接：https://www.1024nav.com/blog/useeffect-vs-uselayouteffect

---