React之高阶组件

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