高阶组件（HOC）

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

高阶组件的语法

接收一个React组件作为入参 


 


 


 


 


 


 


 

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


 


 


 


 


 


 


 

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

什么是纯函数

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

 

 

 

 

 

 

 

 ，都叫做纯函数  
   
   
   
   
   
   
   
。

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

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

 
 

 
 

 
 

 
 

 
 

 
 

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

如何使用高阶组件

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

组件和 高阶组件的区别

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

高阶组件的使用场景

在路由中withRounter()















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






















，比如弹窗                ，校验等

 

 

 

 

 

 

 

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













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

 
 

 
 

 
 

 
 

 
 

 
 

 
 
。