高阶组件

Posted 2023-05-07

参考技术A

实现高阶组件的方法有如下两种。

属性代理是常见高阶组件的实现方法。

在 render 方法中返回传入 WrappedComponent 的 React 组件。这样就可以通过高阶组件来传递 props，这种方法即为属性代理。

原始组件想要具备高阶组件对它的修饰，有两种方式。
方式一：

方式二：
ES7 添加了 decorator 的属性，我们可以通过 decorator 来转换，以此简化高阶组件的调用。

这样组件就可以一层层地作为参数被调用，原始组件就具备了高阶组件对它的修饰。这样保持了单个组件封装性的同时还保留了易用性。
生命周期：
didmount -> HOC didmount -> (HOCs didmount) ->(HOCs will unmount) -> Hoc will unmount -> unmount
功能上，高阶组件可以控制 props、通过 refs 使用引用、抽象 state 和使用其他元素包裹 WrappedComponent。

当调用该高阶组件时，就可以使用 text 这个新的 props了。

当 WrappedComponent 被渲染时，refs 回调函数就会被执行，这样就会拿到一份 WrappedComponent 实例的引用。这就可以方便地用于读取或增加实例的 props，并调用实例的方法。

使用

反向继承是另一种构建高阶组件的方法。

高阶组件返回的组件继承于 WrappedComponent。因为被动地继承了 WrappedComponent，所有的调用都会反向。
通过继承 WrappedComponent 来实现，方法可以通过 super 来顺序调用。因为依赖于继承的机制，HOC 的调用顺序和队列是一样的：
didmount -> HOC didmount -> (HOCs didmount) -> will unmount -> HOC will unmount -> (HOCs will unmount)
在反向继承方法中，高阶组件可以使用 WrappedComponent 引用，这意味着它可以使用 WrappedComponent 的 state、props、生命周期和render方法，但他不能保证完整的子组件树被解析。

对 render 输出结果进行修改：

我们可以做各种各样的事，甚至可以反转元素树，或是改变元素树中的 props。

当包裹一个高阶组件时，我们失去了原始的 WrappedComponent 的 displayName，而组件名字是方便我们开发与调试的重要属性。

调用高阶组件时需要传入一些参数，可以用简单方式实现。

使用：

高阶组件的应用

高阶组件深入理解

高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。新的组件使用传入的组件作为子组件。首先根据定义我们明白它就是一个函数，而且它必须有返回值，返回值是一个组件，当然这里我们高阶组件可以嵌套。

其实高阶组件就是把公用的一些部分提出来，把修改的部分以参数的形势传进去，在这里可能有人会说这那需用什么高阶组件，我自己封装一个组件也可以达到同样的效果，简单的组件在这里你可能通过封装来实现，但是我举两个例子大家在想一下怎么通过组建封装来实现：

1、antd组件的form组件，

2、我们在redux中组件顶部写一行代码@connect之后就可以在组件中通过this.props访问store中的数据和一些修改数据的方法。

我们从一个实际问题来理解并学习高阶组件：有类似的几个组件但是组件内部只有少部分是不同的，它们身上都还有一些公用的方法，并且这些少部分组件组件都还要调用大组件的方法或者访问它的一些数据。我们来分一下：

1、这几个组件的大部分样式和功能是相同的，我们可以可以思考能不能只写一次；

2、它们不同的地方还会触发一些相同的方法；

3、不同的地方只是内部的一小部分；