react中什么是回调函数_在React中使用去抖动的回调

react中什么是回调函数

Debouncing is a really useful tool that software engineers should be familiar with. Today, I will be creating a React hook that should hopefully solve most of your debouncing needs.

防弹跳是软件工程师应该熟悉的非常有用的工具。 今天，我将创建一个React钩子，该钩子有望解决您大多数的反跳需求。

Before I get started, debouncing is a term that gets thrown around quite a bit in software systems. The term originates from electrical systems that don’t cleanly switch from “on” to “off” and change more like this

在开始之前，防弹跳是一个在软件系统中经常使用的术语。 该术语源自电气系统，这些系统不会干净地从“打开”切换为“关闭”，而是像这样进行更改

When making the switch from off to on, the signal “bounces”. So “debouncing” is just cleaning up this noise. The system debounces this signal by only reacting to the new state when the signal has stayed the same for a certain minimum amount of time.

当从关闭切换到打开时，信号“反弹”。 因此，“反跳”只是清除了这种噪音。 仅当信号在一定的最短时间内保持不变时，系统才会通过对新状态做出React来对此信号进行去抖动。

In web development, this idea is also quite useful especially when dealing with user interaction. As an example, we could attach an event listener and do some action when the user resizes their browser window. However, this action will get called so often that it may end up blocking the main Javascript thread and bringing the application to a shuddering halt.

在Web开发中，这个想法也非常有用，特别是在处理用户交互时。 例如，我们可以附加一个事件侦听器，并在用户调整浏览器窗口大小时执行一些操作。 但是，此操作经常被调用，以至于最终可能阻塞主Javascript线程并使应用程序颤抖地停止。

Another example is hitting an API on type events. This is useful for creating an auto search input similar to what you would find on Google

另一个示例是在类型事件上命中API。 这对于创建类似于Google的自动搜索输入很有用。

Hitting an API with every keystroke will result not only in performance issues locally, but when using a public API like the Spotify Web API you will hit limits very quickly. To resolve issues like this when using React, I have created a debounce hook that looks something like this

每次击键都击中一个API不仅会导致本地性能问题，而且在使用诸如Spotify Web API这样的公共API时，您将很快达到极限。 为了解决使用React时的问题，我创建了一个防抖动钩，看起来像这样

import { useRef, useCallback } from "react";


/**
 * Returns a memoized function that will only call the passed function when it hasn't been called for the wait period
 * @param func The function to be called
 * @param wait Wait period after function hasn't been called for
 * @returns A memoized function that is debounced
 */
const useDebouncedCallback = (func, wait) => {
  // Use a ref to store the timeout between renders
  // and prevent changes to it from causing re-renders
  const timeout = useRef();


  return useCallback(
    (...args) => {
      const later = () => {
        clearTimeout(timeout.current);
        func(...args);
      };


      clearTimeout(timeout.current);
      timeout.current = setTimeout(later, wait);
    },
    [func, wait]
  );
};

Firstly, we create a timeout ref that will be used to determine whether it is time to actually fire the function. A ref is used here so that it can be updated without re-rendering the component that this hook is used in.

首先，我们创建一个超时引用，该超时引用将用于确定是否该触发该函数了。 此处使用了ref，以便可以对其进行更新，而无需重新渲染使用此挂钩的组件。

Next, every time the function that is returned from the hook is called, the existing timeout is cleared and a new one is created. If the function hasn’t been called for the wait period, then the later function will get called. This clears the timeout and actually calls the function that was passed in. Here is a working example of this code being used

接下来，每次调用从挂钩返回的函数时，都会清除现有的超时并创建一个新的超时。 如果在wait时间内未调用该函数，则将调用later函数。 这将清除超时并实际调用传入的函数。这是正在使用此代码的一个有效示例

演示地址

In this example, a fake API is used that just returns the text inputted but capitalized. When typing in the text field, the output isn’t updated until 1 second after the user stops typing. This is extremely powerful when hitting an actual API to perform type to search without burning through API limitations. The wait period can be adjusted easily by passing in a different value to the useDebouncedCallback call.

在此示例中，使用了一个伪造的API，该API仅返回输入的文本但大写。 在文本字段中输入内容时，直到用户停止输入内容后1秒钟，输出才会更新。 当点击实际的API来执行类型搜索而不消耗API限制时，此功能非常强大。 通过将不同的值传递给useDebouncedCallback调用，可以轻松调整等待时间。

Hopefully this is useful for anyone trying to figure out how to debounce with react. A hook like this can easily be refactored to work with pure javascript and I will be writing a separate tutorial to do just that soon!

希望这对试图弄清楚如何反作用的人很有用。 这样的钩子可以很容易地重构为与纯JavaScript一起使用，我将写一个单独的教程来尽快做到这一点！

Cheers

干杯

翻译自: https://medium.com/swlh/using-a-debounced-callback-in-react-ade57d31ca6b

react中什么是回调函数