高阶组件
1、什么是高阶组件？
- 高阶组件就是一个 React 组件包裹着另外一个 React 组件
- 因为要访问它的内部状态，所以要用到继承
- 高阶组件就是一个函数，它接受另一个组件作为参数，并返回一个新的组件。
- 当 React 组件被包裹时（warped），高阶组件会返回一个增强的 React 组件。
- 高阶组件让代码更具有复用性、逻辑性和抽象特性。
2、侵入式
- 利用super传递下去
import React from 'react';
import Loding from '../common/loading';
// 侵入式
// 因为要访问它的内部状态，所以要用到继承，继承他的父级
export default (WrapComponent)=>{
return class extends WrapComponent{
render(){
if(this.state.isLoading){
return <Loding></Loding>
}else{
return super.render()
}
}
}
}
3、非侵入式
- 利用...传递下去
hoc/widthAd.jsx
import React from 'react';
// 非侵入式
// WrapComponent 被包裹的组件
export default (WrapComponent)=>{
return class extends React.Component{
render(){
return <div>
<div>
<p>请下载淘票票</p>
<a href="https://dianying.taobao.com/">下载</a>
</div>
<WrapComponent {...this.props}/>
</div>
}
}
}
用的时候直接引入这个文件，然后抛出 export default widthAd(Tab)
4、为什么要使用高阶组件？
- 为了代码的复用性，减少代码的冗余
js继承的几种方式
- function （this指向当前的function）
function A(){
}
A.protytype.add = ()=>{
}