高阶组件（HOC）

高阶组件（Heigher Order Component）也被称之为高阶函数
  
  
  
  
  
  
，容器组件 
  
  
  
  
  
 ，高阶组件是类组件编程中的一种重要代码逻辑复用技巧
  
  
  
  
  
  
。

高阶组件的语法

接收一个React组件作为入参 


 


 


 


 


 


 ，经过修饰
 
 
 
 
 
 
，最后返回一个新的React组件  
   
   
   
   
   
 ，所以这个入参的React组件被称之为“UI组件
  
  
  
  
  
  
”；这个高阶组件被称之为“容器组件 
  
  
  
  
  
 ” 
  
  
  
  
  
 。注意：在高阶组件中无论怎么对UI组件进行修改都不能修改 


 


 


 


 


 


 。所以高阶组件是一种纯函数
 
 
 
 
 
 
。

什么是纯函数

入参不能被修改 

 

 

 

 

 

 ，并且相同入参返回的是相同结果的函数

 

 

 

 

 

 
，都叫做纯函数  
   
   
   
   
   
 。

解决高阶组件导致属性丢失

封装自定义高阶组件时            ，如果props属性丢失 
 

 
 

 
 

 
 

 
 

 
 

 ，可以使用属性穿透（属性继承）解决

如何使用高阶组件

类组件可以使用Hoc(page)或者装饰器语法@page 函数组件只能使用Hoc(page)组件和 高阶组件的区别

组件和 高阶组件的区别

组件是将props转换为UI 高阶组件是将组件转换另一个组件

高阶组件的使用场景

在路由中withRounter()












，在转台管理中content()                  ，在Mobx中有inject()或者observer() 使用高阶组件给页码添加公共的视图结构 
 
 
 
 
 
 
 
 
 
 
 
 ，比如水印等 

 

 

 

 

 

 。 使用高阶组件可以注入全局的公共方法


















，比如弹窗            ，校验等

 

 

 

 

 

 
。 使用高阶组件可以添加相同的业务功能 
 
  
 
  
 
  
 
  
 
  
 
  ，比如DOM功能











，BON功能
  
  
  
  
  
  
，订阅功能等            。 使用高阶组件可以实现权限设计 
 

 
 

 
 

 
 

 
 

 
 

 。