如何在 ReactJS 中执行去抖动？
ReactJS中的去抖动事件将允许您调用一个函数，以确保一个耗时的任务不会如此频繁地触发。它是一个函数，它接受一个函数作为参数并将该函数包装在一个闭包中并返回它，因此这个新函数显示“稍等”行为。
创建 React 应用程序并安装模块：
第 1 步：使用以下命令创建一个 React 应用程序：
npx create-react-app react-debouncing 第 2 步：创建项目文件夹后，即 react-debouncing ，使用以下命令移动到该文件夹：
cd react-debouncing第 3 步：创建 ReactJS 应用程序后，安装 必需的 模块使用以下命令：
npm install lodash项目结构：它将如下所示。
项目目录
示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。
App.js
import React, { Component } from "react";
import { debounce } from "lodash";
class WidgetText extends Component {
state = { text: "" };
handleChange = (e) => {
this.setState({ text: e.target.value });
};
render() {
return (
);
}
}
class App extends Component {
state = { show: true };
handleToggle = debounce(() => {
this.setState(prevState => ({ show: !prevState.show }));
}, 500);
render() {
return (
{this.state.show ? 解释：
- 有一个带有切换按钮的简单页面，如果我们单击它，输入字段会消失，然后再次单击以恢复输入字段，如果我们在输入框中键入，文本将立即反映在下面的文本区域中。
- 我们有一个 React WidgetText 组件，它基本上只有输入和文本区域，然后应用程序组件本身有切换按钮。
- 有条件地，如果我们单击切换按钮，它将进入处理程序抓取，前一个状态查看它显示状态并翻转它，所以如果它是真的，那么如果它是假的，它会渲染 WidgetText 我们做不呈现 WidgetText。
运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：
npm start输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：
