大家好，我是小杜杜（Xiao Dudu），该版本已发行了三年多。它为功能成分带来了生命周期。现在，它逐渐被组件替换。它完全掌握了挂钩吗？您知道如何制作一个好的自定义钩子吗？
我们知道有设置变量，副作用，以获取元素的所有属性，以及性能优化，当然，有一个可以创建您想要的东西
接下来，让我们看一下以下问题，问自己是否都知道：
如果您对上述问题有疑问和好奇，那么本文应该能够为您提供帮助?
本文将介绍上述问题，以介绍自定义钩子，并将钩子组合成TS，Ahooks，以案例的形式演示。
注意：此处解释的自定义钩子可能与顶部略有不同，并且不会考虑。如果用于项目，建议直接使用钩子?
如果您不了解TS，则可以阅读我的文章：允许您使用TS指南的文章
首先附上今天知识的图片，请支持您的朋友：
这是将来的新钩API。目的是增加代码的复制和逻辑。最重要的是解决功能组件没有状态的问题。
那么什么是自定义钩？
这是基础上的扩展。如果您可以根据业务和需求制定相应的逻辑，则可以将常用的逻辑封装为重用
它本质上是一个函数，此功能主要是逻辑重复使用。我们必须首先知道一件事。什么是驾驶条件？
实际上，它经过修改，使用是非状态组件更新的条件，以驱动自定义钩
自定义钩的名称基于用户。我们设计：
const [xxx，...] = usexxx（参数一，参数两个...）
让我们写一个简单的小例子以理解
我们只是写了它。通过给出传递数量的数量，我们使用该按钮切换状态以表示函数内部的状态。让我们看一下此时的效果：
我们发现一个问题，为什么要单击“开关”按钮？
这大大提高了性能开销。我们的理想状态必须不想进行无关的渲染，因此我们必须注意习俗，我们需要减少绩效开销，我们将其添加到组件中：
发现此问题已解决，因此您必须注意它，可以轻松使用习惯，请确保与API合作。
在上面，我们谈到了处理它的无用渲染。接下来，让我们看一下这些钩子的精彩使用（在这里建议您熟悉并使用相应的钩子来创建一个好钩子）
当父组件称为子组件时，父组件的状态会更改，这将导致父组件更新。尽管子类尚未更改，但也将进行更新。
在简单的理解下，当页面非常复杂并且模块非常大时，功能组件将从开始到结尾进行更新。只要更改一个地方，所有模块就会刷新。这种情况显然是不必要的。
我们的理想状态是，每个模块仅自行更新，不相互影响，然后使用是目前最好的解决方案。
在这里特别注意。只要更新父组件的状态，无论是否操作自我组合，都将更新子组件以防止这种情况。
在讲话之前，让我们谈谈。角色是将纯分组纯组件和组件函数组合起来，该功能将比较一次传输的支柱，然后进一步确定需要根据第二个函数返回值来更新哪些profs。
类似于判断是否满足当前有限条件以确定是否执行该函数的概念，第二个参数为数组，确定是否通过此数组更新该函数
该方法可以用于元素，组件，上下文中，尤其是在数组中。首先看一个示例：
从以上，我们可以看到只有在变化时才能进行渲染，从而减少不必要的开销
总结的好处：
与极其相似的相似之处，可以说是正是。唯一的区别是返回函数的结果，函数为
注意：此函数是父组件传输子组件的函数，以防止无关刷新。其次，必须合作此组件，否则不仅不会提高性能，还可以降低性能。
我们可以看到，当单击“开关”按钮时，未封装的功能将再次刷新，并且包装在软件包中的功能将不会再次刷新
USEREF可以获取当前元素的所有属性并返回变量ref对象，并且该对象仅具有当前属性，该属性可以设置初始值
让我们首先看一下案件：
从以上，我们可以看到我们可以获取相应元素的相关属性以执行某些操作
影响：
除了获得相应的属性值外，还有一个更重要的功能，即缓存数据
上面提到的是，当我们封装资格时，我们需要组合usememo和usecallback之类的API，但是我们对变量的控制的值可能会导致旧值获得旧值，如果它们更新，则会带来整个组件要重新执行，这将使整个组件重新执行。这将带来整个组件。在这种情况下，我们使用USEREF将是一个很好的选择
在源代码启动后，在挂钩发布后，使用诸如提供的核心模块偿还了大量的USEMEMO，即使用userf来缓存数据，并且在使用中使用的USEREF（）都没有在此处使用。dom元素，所有这些都是全部，所有这些都是数据缓存
可以简要看：
我们看到，使用重新分配方法来更改缓存数据源并减少不必要的更新。
在上述解释之后，我们知道我们可以获得最新的价值，并且可以制作简单的包装。这样的优点是可以随时确保最新值，并且也可以解决封闭问题
用户创造：是或替代。
这里的隐藏危险是指：
接下来，让我们看一下如何打包一个。首先，我们必须理解以下三点：
了解一到三点，我们可以自己意识到自己
确定更新值是否通过和判断，比较了（旧值）存储（旧值）和新引入（新值）以确定两个数组的数据是否一致以确定是否更新更新该更新
但是这里有一个问题，让我们看一下包裹：
问题，如果（oldDeps === deps）在DepSaresame中返回true是为了比较新数组和旧数组吗？
在这里，我个人认为这步骤是不必要的，因为两个阵列永远不会平等。如果您想判断它是否相等，最好将其用于字符串吗？
这里有没有大个子，您能比较是否有必要比较是否有必要进行比较?
接下来，我们写一个小例子来验证我们是否可以满足我们的要求：
我们可以看到，当我们做出无关紧要的更改时，正常功能也会刷新，但并未刷新，从而增强了渲染的性能?
我相信已经使用过它们的朋友不再熟悉，我们可以用来模拟总和的总和。
无需说出这个钩子，它只是简化了所使用的第二个参数：
这需要注意一点，也就是说，用于确保传输的功能是最新状态，因此可以与上述提到的Uselatest结合使用。
效果如下：
USEUPDATE：强制更新
有时我们需要强制更新的组件。目前，我们可以使用此钩子：
效果如下：
UserEactiv：响应迅速
原因：我们知道该变量的格式可以定义为：
通过设置以获取，使用此方法呈现视图
让我们看一下正常操作，这次的价值为7，这意味着数据响应迅速
我们还可以编写响应吗？我可以自由设置计数的值并随时获取计数的最新值，而不是通过设置设置。
让我们考虑如何实现响应特征，即提出以下问题。如果您有兴趣，您可以首先考虑一下：
关于上述四个小问题，最重要的是我们如何制作数据并希望做出响应，我们必须监视该值的变化，并为了进行更改，即，我们操作此数字当您需要相应拦截时，您目前需要的知识点：代理
在这里，您将使用代理点并进行反思。如果您有兴趣，可以阅读我的文章：？花一个小时，快速了解ES6?ES12的整个特征
代理：接受的参数是对象，因此解决了第一个问题，并且参数是对象。因此如何刷新尝试？在这里，以上用户update用于迫使刷新来更改数据。
为了优化它，只需在上面使用它，然后合作将其放置。
让我们在这里谈论它，因为我们不知道会通过哪种类型的传输，因此我们需要在这里使用仿制药。我们接受的参数是对象，而是键值的形式。其中，关键是字符串，值可以是任何类型，因此我们可以，因此我们可以
如果您有不熟悉的朋友，您可以阅读我的文章：一篇文章，该文章允许您完全使用TS指南（也出售一次，有点广告，不在乎?）
此外，我们只需要拦截设置（设置）并获得（获取），其中：
接下来，让我们验证我们写的内容。我们将在字符串，数字，布尔值，数组，函数和计算属性方面进行验证：
效果如下：
原因：我们需要在收听各种事件时收听各种事件，例如：监视点击，键盘事件，滚动事件等。我们均匀地封装了它，以促进后续的呼叫
简单地说，它是基于基础的包装。让我们考虑一下此基础上需要使用的内容？
首先，输入可以分为三个
您需要在此处注意，以删除销毁时相应的监视事件
注意：默认设置在此处设置。至于原因：因为我们使用的值是
接下来，让我们看一下如何优化此组件。这里的优化是相似的，但是存在差异。原因是在这里判断的需求比比较复杂。
再次通过，更喜欢使用的值，然后考虑它。您可以直接使用它来防止值获得最新值。
这是关于我的想法的简短讨论（错误的地方或更好的建议，欢迎来到评论区域：
验证是否可以正常使用。
影响：
我们可以使用此钩子封装其他钩子，例如鼠标悬停，长压事件，鼠标位置等，这是鼠标徘徊的一个小例子
useHover：是否有鼠标悬停在DOM元素
这很简单，只需通过监视并聆听它，只需返回布尔值：
影响：
在这里，我们主要介绍三个相关的时间，即：和和和。
USETIMET：一段时间，执行一次
只要参数和延迟时间可用，应注意，卸载时会清除计时器
详细的代码：
显示结果：
UseInterval：一段时间后每次都被执行
一般来说，第一次还有另一个参数
详细的代码：
显示结果：
USECOUNTDOWN：简单控制倒数挂钩
和以前一样，让我们考虑一下这个钩子需要什么：
详细的代码
核实
显示结果：
只需总结：
本文总共解释了12个自定义挂钩，即：
这里的材料的来源是Ahooks，但与Ahooks并不完全相同。有兴趣的合作伙伴可以结合源代码比较。
我相信，在本文的帮助下，每个人都应该像我一样深入了解。当然，实践是测试真相的唯一标准。掌握很多代码是国王?
此外，我认为本文可以为您提供帮助，请喜欢+收集它，并关注专栏。之后，您将输出相关的良好文本。
原始：https：//juejin.cn/post/710146767336849421