React Hooks已经有三年多了，基本上，在团队中，在班级组件中很少见，很少见到钩子没有争议。，按钮摇晃，非常常见的业务需求，但写作确实并不容易。
互联网上确实有一些出色的挂钩库已实施，但是引入和介绍的一些文章或多或少是问题。因此，在撰写本文时，也欢迎您进行交流。
日常开发中遇到的场景非常普遍。例如，输入搜索的逻辑是页面中的输入框，根据用户输入从远程拉动结果返回。
在这种情况下，如果用户发抖，请求的频率将非常频繁。因此，输入行为需要发抖，以达到降低请求频率的效果。
不颤抖的简单代码如下：
效果显示在图中：
在上面的示例中，当用户输入时，请在此处使用远程接口返回的请求。此处使用模拟获取，并在500ms之后返回结果。
可以看出，每次输入字母时，都会启动请求。在实际业务中，它显然给服务器带来了不必要的压力。
正常震颤相对简单。本质是设置一个时间删除的时间函数，以延迟到Waittime。每个执行，首先清除最后一个计时器，然后启动一个新的计时器。然后最后一次清除计时器，直到不再触发函数，从而执行先前设置的计时器函数以使用此方法来实现消除目的消除目的抖动。
共同的实施如下：
直接使用上面的Debonce函数颤抖，很容易在组件中写下以下颤抖方案：
关键修改点是通过Debonce函数包装原始功能。效果如下所示：
从结果来看，以这种方式写作实际上实现了预期的效果。
但请仔细分析代码：
每次渲染组件时，Debonce函数每次都会执行它以生成新的颤抖功能，但是由于Usecallback中的依赖项是空的，因此GetRes将使用第一个产生的颤抖，每次第一个产生的颤抖，每次产生的颤抖，从而表达期望在性能方面。
每次添加依赖项项目都可以忽略DEBOUNDCE在性能中的性能的丧失，但是如果UserCallback依赖依赖，那么每个GetRes功能将是一个新的颤抖功能。如果您不谈论问题，因为那里是颤抖函数的计时器，在更新GetRes功能之后，旧的颤抖功能中的计时器是不关心的，并且将被执行，这将缺乏摇动的效果。
举例说明，假设服务端的接口需要用户的输入，以及页面上用户的持续时间作为参数，则修改代码如下：
核心修改是原始USECALLBACK中的依赖项是空的，现在这取决于用户的停留时间。效果如下：
当它快速进入时，获取的数量一直在增加。这实际上是因为持续时间每1秒更新一次。在此及时的结果中，未编写了先前的getRes函数设置的计时器，从而导致fetch的执行。
在简单性下，原始功能直接颤抖着使用原始功能。在正常情况下，它可以满足期望。
但是，当原始函数取决于外部，并且触发组件在执行颤抖函数期间的依赖项的修改时，此时旧颤抖功能的计时器将无法清理。达到预期结果。
当然，在上面的示例中，实际上，持续时间可以使用userf避免getRes函数依赖于此，但是如果有许多参数取决于？此时，每个依赖项项目都更改为参考，甚至某些依赖关系为了修改组件的渲染，您需要保留该状态的两个状态和参考的两个变量。编码可读性也会变得更糟。
实际上，通过上述分析保持相同的计时器，问题的核心是：
渲染每个组件后，每个组件渲染后将生成一个新功能。目前，如果它取决于用户回扣，则可能无法清理由最后一个颤抖功能生成的计时器，从而导致静止执行会引起意外的期望。
在理解问题之后，解决方案实际上是绝望的。核心是维护计时器。只要计时器是相同的，那么无论是更新了多少次，最后一次清除时间。代码如下：
效果如下所示：
它似乎符合期望。当用户停止输入时，这确实是一段时间内的延迟。
但是实际上，这里隐藏了一个错误。由于执行延迟，尽管USECALLBACK将持续时间添加为依赖项，但是当用户持续最后一个输入时，将打开一个计时器函数，在一定时间后发出提取请求。
如果用户的最后一个输入结束后持续时间更改，则该计时器实际上是在最后持续时间使用的。严格来说，这与期望不一致。在上面的示例中，延迟更改为5000ms，效果将是显而易见的，如下所示：
在上图中，颤抖函数的长度延迟到5s。当用户第一次停止输入时，大约是5s。当计时器真正执行时，大约是10秒，而传递给服务器的时间实际上传递给了服务器杜松，在停止输入时5s。当然，在这种情况下，它可能与业务期望相符但是，如果其他参数仍然依赖其他参数，则其他参数的5秒已更改，但是请求是旧值
维护相同的功能后，在维护相同的计时器后，它确实消除了先前计时器引起的频繁执行问题。没有新的行为来触发新的颤抖功能，然后您将访问旧的依赖项，这将带来潜在的错误。
实际上，对于延迟带来的旧依赖性问题，它在钩子中非常普遍。通常，它可以通过参考来解决，但是在此问题中，如果参数依赖于颤抖功能是参考，则一方面不容易将逻辑从侧面拉出，并改变主意以重新置换功能。该代码看起来更容易理解，如下所示：
核心是：
这样，最新函数始终在延迟执行过程中执行，即使用最新参数求解延迟项目的错误的getRes函数（通常称为延迟执行封闭的挂钩（通常称为挂钩封闭package问题））。
以上包装自定义钩的代码相对清晰，但是每次颤抖时，都有很多小工具。这真的难以忍受。挂钩的最大好处之一是逻辑包装。如下：
通过参考维护相同的计时器，然后通过FNREF保持与外部FN的同步，最后返回到Fndebounced。
这里有几个细节：
完整的示例代码如下：
效果如下：
更改为5000ms延迟后，在调用时，当前持续时间也将被取代而不是先前的值。效果如下：
在这一点上，在分析下，我终于得到了一个定义明确的钩子，并没有漏洞的颤抖。
当然，在此版本中，也有一些可以优化的位置，也就是说，当组件被卸载时，消除了计时器，以避免在卸载组件后执行恢复。代码如下：
在本文中，通过基于用户输入的常见颤抖业务方案，从最基本的写作到钩子写作，分析错误和现有问题，并最终获得了自定义挂钩的写作。
总体而言，钩子使反应组件非常纯净。每个渲染都是重新执行该函数。与类成分的生命周期相比，功能分量确实是纯粹的。
但是，由于存在异步操作和依赖性，仍然存在许多关闭问题，并且一些常见的操作（例如颤抖着偶然落入了坑中）。
但是，在整理出常见的心理负担之后，钩子仍然很方便且纯净，而且颤抖的定制钩子也完全显示出其逻辑且易于重复使用。
最后，我看到了，就像它一样。╮（╯_╰）╭·
原始：https：//juejin.cn/post/710149282355115295