用好useLayoutEffect和useEffect！趣味揭秘两者的差别

前端

2024-02-16 01:35:50

useLayoutEffect和useEffect的区别

useLayoutEffect和useEffect都是React中用于处理副作用的钩子。它们都可以用于执行异步操作，但它们在执行的时机上有所不同。

useLayoutEffect： 在渲染之后立即执行。
useEffect： 在浏览器更新DOM之后执行。

这意味着useLayoutEffect会在浏览器更新DOM之前执行，而useEffect会在浏览器更新DOM之后执行。这使得useLayoutEffect非常适合用于更新DOM，而useEffect更适合用于执行其他类型的副作用，例如：

获取数据
设置计时器
处理表单提交

useLayoutEffect的示例

以下是一些useLayoutEffect的示例：

更新元素的大小或位置
添加或删除元素
更改元素的样式

import React, { useState, useLayoutEffect } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default MyComponent;

在这个示例中，我们使用useLayoutEffect来更新浏览器中的标题。每次count状态发生变化时，useLayoutEffect钩子都会执行，并更新浏览器中的标题。

useEffect的示例

以下是一些useEffect的示例：

获取数据
设置计时器
处理表单提交

import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://example.com/api/data")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default MyComponent;