ReactJS - useLayoutEffect Hook

---

---

新的 Hook `useLayoutEffect` 在 React 18 版本中引入。这个 Hook 可以传递到组件的渲染函数中，强制 React 库考虑页面的布局并调整其对间距和溢出等内容的计算。

简单来说，当我们需要检查网页不同元素的外观并根据发现的内容进行更改时，它非常有用。它运行速度很快，允许在网页视觉更新之前进行更改。这有助于创造更流畅、更响应迅速的用户体验。就其运行时间而言，它类似于 `componentDidMount` 和 `componentDidUpdate` 方法，只是它适用于 React 中的函数组件，而不是类组件。它确保在浏览器显示更新之前进行更改。

语法

useLayoutEffect(setup, deps)

参数

• setup − 这是你放置代码的地方，这些代码会在你的 React 组件添加到网页时运行。

• deps − 依赖项充当我们 setup 代码所依赖的元素的清单。它可以是来自组件外部的任何内容，例如信息、数据或我们在组件内生成的内容。

返回值

它返回 undefined。

如何使用它？

React 中的 `useLayoutEffect` Hook 接受两个参数。第一个参数是 effect 函数，第二个参数是依赖项数组。第一个参数 effect 通常是 undefined 或返回一个清理函数。`useLayoutEffect` 函数签名如下所示：

import React, { useLayoutEffect } from "react";
const App = props => {
   useLayoutEffect(() => {
      
      //Perform an action and either return undefined or clean up function.
      return () => {
         //Do  clean up here
      };
   }, [dependencies]);
}; 

`useLayoutEffect` Hook 是一个强大的 React 组件，允许我们直接控制渲染时输入焦点的位置。此功能可用于实现各种用户交互，从隐藏信息到创建下拉菜单。它允许我们仅用一行代码完全自定义幕后发生的事情。

示例

示例 - 简易用户输入应用

此应用包含一个简单的输入字段。当我们输入时，输入的值会立即记录。它使用 `React.useLayoutEffect` 实时捕获和显示输入值，提供与用户输入的动态交互。

import React from "react";

function App() {
   const [value, setValue] = React.useState("");   
   React.useLayoutEffect(() => {
      console.log("Input value: ", value);
   }, [value]);
   
   return (
      <div>
         <input
         type="text"
         value={value}
         onChange={(e) => setValue(e.target.value)}
         />
         <p>You typed: {value}</p>
      </div>
   );
}

export default App;

输出

示例 - 切换按钮应用

在此应用中，我们将有一个按钮来切换在线和离线状态。当前在线状态使用 `React.useLayoutEffect` 记录，并相应地显示消息。因此，此应用的代码如下：

import React from "react";

function App() {
   const [isOnline, setOnline] = React.useState(true);   
   React.useLayoutEffect(() => {
      console.log("Online status: ", isOnline ? "Online" : "Offline");
   }, [isOnline]);
   
   return (
      <div>
         <h2>{isOnline ? "You are online" : "You are offline"}</h2>
         <button onClick={() => setOnline(!isOnline)}>
            Toggle Online Status
         </button>
      </div>
   );
}

export default App;

输出

示例 - 计数器应用

让我们看看一个使用 `useLayoutEffect` 的简单计数器应用程序，它在单击按钮时递增计数，并使用 effect hook 在控制台中打印值。

import React from "react";

function App() {
   const [count, setCount] = React.useState(0); // Initialize with a number   
   React.useLayoutEffect(() => {
      console.log(count);
   }, [count]);
   
   return (
      <div>
         <h1>The count is {count} </h1>
         <button onClick={() => setCount(count + 1)}>Click here</button>
      </div>
   );
}

export default App;

输出

此代码是一个 React 组件，它使用 `useLayoutEffect` hook 跟踪 count 状态的值每当它发生变化时。它在网页上显示当前计数，并允许用户通过单击按钮来增加它。

限制

• `useLayoutEffect` Hook 只能在组件的顶层或其他自定义 Hook 内使用。它不能在循环或条件内使用。如果我们需要在循环或条件中使用它，请创建一个单独的组件并将 effect 放置在那里。

• 当我们在开发模式下使用 React 的 Strict Mode 时，React 会执行额外的检查以确保我们的清理代码与我们的 setup 代码匹配。如果因此遇到问题，请确保我们的清理代码正确撤消了我们的 setup 代码所做的操作。

• 如果我们的 effect 所依赖的任何项目是在我们的组件内生成的 object 或 function，则 effect 的执行频率可能会高于必要频率。为了解决这个问题，我们可以删除不必要的 object 和 function 依赖项。