大家好，我是小杜杜。今天，我们谈论的是高级组件。我相信朋友对此并不陌生。他们或多或少都知道。我知道，奇怪的是，我不知道如何使用它，我不知道我的朋友是否有这种感觉?
在React访谈中，我们经常问，包括许多其他源代码，实现方法与HOC无关。这似乎是一个简单的介绍。实际上，这并不简单。阅读了这篇文章后，请同时支持您的朋友?
高级组件可能不像您想象的那样简单。它可以做很多事情。接下来，让我们看一下以下问题：
如果您对上述问题有疑问，那么本文应该能够很好地帮助您。
与过去一样，请附上知识图，请支持您的朋友?
高水平的组件：也称为HOC，它是重用组件逻辑的高级别技术，HOC本身不是React API的一部分，而是基于React的组合特征形成的设计模式。
那么可以称呼什么样的组件？
如果组件收到的参数是组件，而返回也是组件，则组件为
我们发现参数和返回是一个组件，因此我们可以理解它是对该组件执行的，以改进组件...
这是图形图：
从图可以看出，HOC完全包含在组件A中。可以说这是一个超级组件A，因此我们应该注意增强这些功能，添加这些功能，解决这些功能的包装组件A那些缺陷。含义是
为了更好地理解上面的图片，制作一个小栗子？：
我们可以看到这是一个高级组件，他添加了一个属性。让我们看一下此时的效果：
目前，索引获得了名称。
一些朋友可能不熟悉写作，然后简短地谈论：
让我们翻译成一个外观
实际上，第二个是，我们引用了，目前是
HOC使用两种模式：
这是上面的示例，然后谈论它。
它只能用于组件，需要用于其他配置。由于现在已更换，因此不建议您了解此写作，但您需要了解。
使用 @，例如：
注意这里包装的顺序。靠近组件的是组件的内层
这是函数函数的功能：
在这里，我将高级组件的作用分为五类。
有两种加强的主要方法，即
上面的栗子？它与道具混合，与原始属性混合
影响：
这样，它实际上是相应的方法，然后执行它是正确的。
条件渲染：需要一个条件来控制它是否被渲染，触发条件，而不是操作组件的内部控制渲染。
让我们来看看以下示例：
影响：
我们发现的角色是控制组件是否已加载。如果未加载，则会给出少量的负载。
当数据量很大时，我们执行许多子类（例如列表）。如果我们一次加载，可能会发生这种情况，并且情况可能会发生。目前，使用碎片渲染是一个很好的优化解决方案。
sub -film渲染：简而言之，这是下一个执行下一个的渲染。这个想法是创建一个队列，该队列由计时器渲染。例如，有三遍。执行完成并完成执行后，执行第二次，直到整个执行完成为止，并且渲染队列为空。
HOC：
代码显示：
显示结果：
异步组件的事件经常在路由上使用以加载相应的页面，例如：DVA和有兴趣的朋友可以查看此片段的内容：在React App中与此hoc hoc hoc this hoc this thisArticle一起在React App中加载组件异步。
让我们看一下异步组件HOC的代码：
每次您致电时，React都会尝试引入此组件，该组件将自动加载包含该组件的块。
如何使用：
例子：
这里定义的不是直接定义组件。安装时，将调用函数，然后将返回一个组件。中间，重新触发渲染并加载
因此经常与路由合作。对我们来说，加载页面的本质也是组件（容器组件），也就是说，我们只需要由我们在开始时访问的页面加载。使用与上面的页面相同
在上一篇文章中，该新秀详细解释了自定义钩子的实际战斗。我相信阅读的朋友已经可以实现各种各样的，相同的高端组件，也可以与相应的性能优化合作。
有兴趣的朋友可以看一下：了解这12个钩子，保证您可以与React一起玩
这个小栗子？它还使用上一篇文章的自定义钩子来帮助每个人更加熟悉?
小栗子？：
我们可以看到，儿童组件的价值与关系有关，但它与之无关，但是我们将切换状态以查看它是否会重新恢复：
影响：
就原因而言，它与它无关，但是当它更改时，它仍然会触发。显然，我们不想引起无关的渲染，因此我们还可以通过组合来优化组件：
我们将其包裹起来后，看看效果：
这样，我们解决了这个问题。
智能合作伙伴发现了一个问题，即，以上只能在当前组件下使用，因为子类的变量不是特定的值，并且不公开。需要条件才能控制是否渲染
让我们将另一个函数传递给依赖项，该项目充当依赖项
使用：
这可以达到一般效果。
同时，我们可以使用这个高端组件来优化性能并提高页面的性能，这将非常方便
可以完成的功能。该场景可以通过其他功能（例如：埋葬点）进行处理。我们可以监视相应的事件并处理一些其他事情。
首先，我们需要进行自定义，其次，目标，方法和处理功能本身需要监视对象的对象。
在这里，我选择监视相应的目标。使用AddEventListener监视事件
HOC：
这样一个简单版本的监视事件的事件已准备就绪，写下来看这个小栗子？：
显示结果：
可以看出，在事件包裹后，可以通过获得不同的获取元素的方法劫持相应的事件，但是有必要注意它。这里的事件不会阻碍原始点击事件，而只会根据其增加功能。执行订单比原始事件更好
您可以通过反向继承模式使用劫持组件的渲染函数，并且可以更改和更改。同时，您也可以劫持模块的生命周期，或增加生命周期
我们上面说的等等。在原始组件上得到了增强或控制，并且反向继承可以改变原始组件的形式。接下来，让我们看看：
HOC可以获取相应的元素，然后与合作，并等待API操作元素，实现替换节点，并修改道具的魔法使用。
板栗？：
显示结果：
可以看出，最初渲染的内容，但是我们在劫持后改变了。我们可以在此方法中替换签名吗？当我不说?
我们可以通过原型获得相应的生命周期功能，以实现劫持生命周期的效果
板栗？：
显示结果：
这些知识与理解一样好。尽量不要在实际开发中使用它。主要有以下两个原因（欢迎来到评论区域以指出错误的位置）：
这篇文章指的是我不是一个外星大个子。我读了很多文章。我没有这个大个子的细节。阅读后，我真的很受益。
在本文中，根据我自己的理解，我只是希望我能增加自己的知识储备并改善自己。请不要喷洒?
我相信，在本文的帮助下，每个人都应该像我一样深入了解。当然，实践是测试真相的唯一标准。掌握很多代码是国王?
此外，我认为本文可以为您提供帮助，请喜欢+收集它，并关注专栏。之后，您将输出相关的良好文本。
其他：
原始：https：//juejin.cn/post/710345089054727