ReactJS - useLayoutEffect Hook

React 18 版本引入了新的Hooks(钩子)"useLayoutEffect"。此Hooks(钩子)可以传递到组件的渲染函数中，以强制 React 库考虑页面的布局并调整其计算，例如间距和溢出。

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

语法

useLayoutEffect(setup, deps)

参数

• setup − 这是将 React 组件添加到网页时运行的代码放置在其中的地方。

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

返回值

它返回未定义。

如何使用它?

React 中的 useLayoutEffect Hooks(钩子)接受两个参数。第一个参数是效果函数，而第二个参数是依赖项数组。第一个参数 effect 通常是未定义的或返回清理函数。useLayoutEffect 函数签名见以下代码 −

import React, { useLayoutEffect } from "react";
const App = props => {
   useLayoutEffect(() => {
      
      //执行一个操作并返回未定义或清理函数。
      return () => {
         //在这里进行清理
      };
   }, [dependencies]);
}; 

useLayoutEffect Hooks(钩子)是一个强大的 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 的帮助下看一个简单的计数器应用程序，该应用程序在单击按钮时增加计数并使用控制台中的效果钩子打印该值。

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 Hooks(钩子)进行跟踪。它在网页上显示当前计数，并允许用户通过单击按钮来增加计数。

限制

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

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

• 如果我们的效果所依赖的任何项目是组件内生成的对象或函数，则效果的执行频率可能会超过必要的频率。为了解决这个问题，我们可以删除不必要的对象和函数依赖关系。

reactjs_reference_api.html