反应高阶分量简介

React高阶组件是什么？高阶组件可以做什么？高阶分量是一个接受分量并返回新分量的函数。

这是react官方网站上给出的解释。也就是说，高阶组件接收一个组件，然后返回一个新组件。这就是函数式编程的思想。高阶组件是如何实现的？有两种方法：属性代理和反向继承。

属性代理：本质上，它通过包装原始组件来操作道具；

从“React”导入React，｛Component｝

常量HOC=（包装组件）=>

类WrapperComponent扩展Component{

；render（）{

 nbsp；return＜WrappedComponent｛…this.props｝/>；

}

}

//常用组件

类WrappedComponent扩展了Component{

；render（）{

 nbsp； ；//。。。。

}

}

//使用高阶组件

导出默认HOC（WrappedComponent）

我们可以看到WrappedComponent组件被原封不动地返回。

操作道具：

我们看到，要传递给包装组件WrappedComponent的属性首先传递给高阶组件（WrapperComponent）返回的组件，这样我们就可以获得对props的控制（这就是为什么这个方法被称为属性代理）。我们可以根据需要添加、删除和修改传入的道具（当然，您需要控制修改的风险）

常量HOC=（包装组件）=>

；类WrapperComponent扩展Component{

 nbsp； ；render（）{

 nbsp； ； ； ；常量newProps={

 nbsp； ； ； ； ； ；名称：'HOC'

 nbsp； ； ； ；｝

 nbsp； ； ； ；return<包装组件

 nbsp； ； ； ； ； ；｛…this.props｝

 nbsp； ； ； ； ； ；｛…newProps｝

 nbsp； ； ； ；/>；；

 nbsp； ；｝

}

一个固定名称属性被添加到WrappedComponent，因此WrappedCommonent中将有一个额外的名称属性。

获取ref：在属性代理中，您可以轻松获取包装组件的实例引用（ref）

从“React”导入React，｛Component｝；

常量HOC=（包装组件）=>

；类wrapperComponent扩展了Component{

 nbsp； ；存储参考（ref）{

 nbsp； ； ； ；这ref=参考；

 nbsp； ；｝

 nbsp； ；render（）{

 nbsp； ； ； ；return<包装组件

 nbsp； ； ； ； ； ；｛…this.props｝

 nbsp； ； ； ； ； ；ref＝｛：：this.storeRef｝

 nbsp； ； ； ；/>；；

 nbsp； ；｝

}

接受wrapperComponent渲染后，我们可以获取WrappedComponent组件的实例，然后实现调用实例方法的操作（当然，这在某种程度上是反模式的，不太推荐）。

抽象状态：在属性代理的情况下，我们可以将包装组件中的状态引用到包装组件。一个常见的例子是实现从非受控组件到受控组件的转换

类WrappedComponent扩展了Component{

；render（）{

 nbsp； ；return＜input name=“name”｛…this.props.name｝/>；

}

}

常量HOC=（包装组件）=>

；类扩展组件{

 nbsp； ；建造师（道具）{

 nbsp； ； ； ；超级（道具）；

 nbsp； ； ； ；这状态={

 nbsp； ； ； ； ； ；名称：''；，

 nbsp； ； ； ；}；

 nbsp； ； ； ；此名称C