React之高阶组件
import React,{Component,Fragment} from 'react'
import Test1 from './Test1.js'
import Test2 from './Test2.js'
/*
* 1、高阶组件:是一个函数,接收一个参数,参数是一个组件
* 2、高阶组件的作用:让外层函数帮助内层组件完成任务,内层组件直接使用结果
* 3、一些共有的方法和属性可以写在高阶组件里,调用了高阶组件函数的组件,都会继承到这些方法和属性,比如这里的change方法,达到复用目的
一般让外层组件去获取一些数据,参数组件也可以拥有;让参数组件拥有一些公用的方法
*/
const HOC=(Comp)=>{//定义一个高阶组件函数
return class Outer extends Component{//Outer为外层组件,也即木偶组件、容器组件,这个名字可以随意取,首字母大写,这个Outer一般也不写,那包裹在参数组件外面的就是一个component标签了。
constructor(){//构造器创建状态(数据)
super()
this.state={
flag:true,
msg:'哈哈哈'
}
}
change=()=>{
//一个生命周期钩子
console.log('hahaha')
}
render(){
return (
//{...this.state}作用是将外层组件Outer的所有状态都给了内层组件,所以内层组件的原组件Tset1和Test2的props上也有这些数据
//change = { this.change}则是将外层组件的函数传到了Tset,
<Comp {...this.state} change = { this.change} ></Comp>
//这个返回的是UI组件,即内层组件
)
}
}
}
const Test111=HOC(Test1)//调用高阶组件函数
const Test222=HOC(Test2)//调用高阶组件函数
class Gjz extends Component{
constructor(){//设置状态数据
super()
this.state={
msg1:'还未修改数据'
}
}
gai=()=>{//设置一个状态修改函数
this.setState(()=>{
return {
msg1:'修改数据了哦!'
}
})
}
render(){
return (
<Fragment>
<button onClick={this.gai}>修改</button>
<br/>
{this.state.msg1}
<br/>
{/*还可以:
这里将Gjz组件的状态数据写在了通过高阶组件生成的组件上,相当于传给了Test1组件,其props上也有这些状态数据
即组件的数据被高阶组件的外层组件获得,然后传给了高阶组件函数的参数组件,得以继承 */}
<Test111 {...this.state}>666</Test111>
<br/>
<Test222>777</Test222>
</Fragment>
)
}
}
export default Gjz