2025年reactjs教程（react .js）

编程日记 • 2025-07-24 18:06 • 阅读 48

当你将一个新应用推向生产环境时，你希望确保它用户友好。网站的性能是用户体验的关键部分。每个用户都希望网站及其内容能够快速加载。每一秒都是宝贵的，可能导致用户再也不会访问你的网站。

经过防抖处理后，会返回一个新的函数。现在，每当你调用时，它都会在500毫秒后执行。

这个函数只会被调用一次，以返回一个防抖函数，并且这个防抖函数将在后续的代码中使用。

这会将函数调用延迟delay毫秒。但是，这还不完整，因为它只满足了第一个要求。我们如何实现第二个行为呢？

每次你调用setTimeout时，ID都是不同的。我们将使用这个timeout变量来重置计时器。

在这里，如果我们调用inner()，代码将没有错误并且打印5。但是，如果我们试图直接访问x，JavaScript将抛出一个引用错误。

在JavaScript中引用错误

在这里，JavaScript使用闭包来在每次使用防抖函数时都保持对timeout的访问。

计时器被重置后，为当前函数调用启动一个新的计时器，并将其ID分配给timeout。对于由于闭包而访问相同timeout的后续函数调用，这个过程会重复。

通过这样做，我们满足了我们的第二个要求 - 即重置计时器并启动新的计时器。现在是时候使用这个防抖函数了。

debouncedFun()基本上是带有防抖行为的fun()。让我们以不同的时间间隔调用这个函数来测试我们的功能。

第一个函数调用立即执行。另外两个分别在300ms和900ms后执行。你能猜到输出吗？

为了在防抖时包含参数，返回一个接受参数的防抖函数。

通过使用展开运算符，传递给防抖函数的任何参数都将存储在args变量中的数组中。然后，使用相同的args数组展开调用实际函数。

上面的代码在500毫秒后打印出"This is a function with arguments 2 and 3"。

Google搜索在输入"Top 10"后的自动完成功能

每次输入值都会进行API请求

数据将存储为状态，并且只有在数据非空时才会显示结果。我会跳过本教程的CSS，你可以在Git Repo中找到它。

如果没有输入值，简单地退出函数。否则，对节点服务器端点进行请求。由于此函数在每次输入更改时都会被调用，因此我们将对该函数进行防抖。

现在，在应用程序组件内部，调用此方法一次以获取。

我们将使用这个新方法作为输入元素的事件处理程序。

输出

屏幕上的输出

正如你在网络选项卡中看到的，只发送了一个请求，而不是三个。这使得搜索性能得到了很大的改善。