React 高阶组件入门介绍
高阶组件的定义
HoC不属于React的API，它是一种实现模式，本质上是一个函数，接受一个或多个React组件作为参数，返回一个全新的React组件，而不是改造现有的组件，这样的组件被称为高阶组件。开发过程中，有的功能需要在多个组件类复用时，这时可以创建一个Hoc。
基本用法
包裹方式
constHoC=(WrappendComponent)=>{
constWrappingComponent=(props)=>(
上述代码中，接受WrappendComponent作为参数，此参数就是将要被HoC包装的普通组件，在render中包裹一个div，赋予它className属性，最终产生的WrappingComponent和传入的WrappendComponent是两个完全不同的组件。
在WrappingComponent中，可以读取、添加、编辑、删除传给WrappendComponent的props，也可以用其它元素包裹WrappendComponent，用来实现封装样式、添加布局或其它操作。
组合方式
constHoC=(WrappedComponent,LoginView)=>{
constWrappingComponent=()=>{
const{user}=this.props;
if(user){
return
上述代码中有两个组件，WrappedComponent和LoginView，如果传入的props中存在user，则正常显示的WrappedComponent组件，否则显示LoginView组件，让用户去登录。HoC传递的参数可以为多个，传递多个组件定制新组件的行为，例如用户登录状态下显示主页面，未登录显示登录界面；在渲染列表时，传入List和Loading组件，为新组件添加加载中的行为。
继承方式
constHoC=(WrappendComponent)=>{
classWrappingComponentextendsWrappendComponent{
render()(
const{user,...otherProps}=this.props;
this.props=otherProps;
returnsuper.render();
}
}
returnWrappingComponent;
};
WrappingComponent是一个新组件，它继承自WrappendComponent，共享父级的函数和属性。可以使用super.render()或者super.componentWillUpdate()调用父级的生命周期函数，但是这样会让两个组件耦合在一起，降低组件的复用性。
React中对组件的封装是按照最小可用单元的思想来进行封装的，理想情况下，一个组件只做一件事情，符合OOP中的单一职责原则。如果需要对组件的功能增强，通过组合的方式或者添加代码的方式对组件进行增强，而不是修改原有的代码。
注意事项
不要在render函数中使用高阶组件
render(){
//每一次render函数调用都会创建一个新的EnhancedComponent实例
//EnhancedComponent1!==EnhancedComponent2
constEnhancedComponent=enhance(MyComponent);
//每一次都会使子对象树完全被卸载或移除
return
React中的diff算法会比较新旧子对象树，确定是否更新现有的子对象树或丢掉现有的子树并重新挂载。
必须将静态方法做拷贝
//定义静态方法
WrappedComponent.staticMethod=function(){/*...*/}
//使用高阶组件
constEnhancedComponent=enhance(WrappedComponent);
//增强型组件没有静态方法
typeofEnhancedComponent.staticMethod==='undefined'//true
Refs属性不能传递
HoC中指定的ref，并不会传递到子组件，需要通过回调函数使用props传递。
参考链接
高阶组件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。