8、react 高阶组件

1、高阶组件：封装
高阶组件使用得是react得一种模式，增强现有组件得功能
一个高阶组件就是一个函数，这个函数接收得是组件类作为参数得，并且返回得是一个新组件，再返回得新组件中有输入参数组件不具备得功能（以上提到得所有得组件都不是组件得实例，是类，输入得这个组件也可以是无状态组件函数）
2、高阶组件意义：
重用代码
可以修改现有组件得行为
3、实现高阶组件得方式：代理式的高阶组件、继承式的高阶组件
4、代理式得高阶组件--属性代理
5、继承式的高阶组件--反向继承来实现得
6、高阶组件缺点：
静态方法会丢失：
因为原始组件时被包裹再新组件中得，新组件没有原始组件得任何静态方法
refs属性不能传递：
高阶组件可以传递所有得props给包裹得组件Com，但是有一个属性不行，ref，如果我们给高阶组件创建得组件添加ref得话，ref指向的时最外城的容器组件，不是包裹的Com组件解决方法使用react中提供的React.forwardRef来获取
反向继承不能保证完整得子组件被解析：
组件分为class类组件和function函数组件
如果渲染的时候包含function组件的话那么就不能操作组件的子组件了
7、高阶组件可以带给我们很大方便，规则：
props保持一致：
再使用高解组件的时候返回的组件要尽量保持和原组件的props一致
不能再函数组件上使用ref属性，因为函数组件没有办法进行实例
不要以任何方式改变原始组件（第三方组件）
不要再render方法中再使用高阶组件了
在使用传值的时候要把不相关的props进行包裹起来
包裹组件显示名字以便测试

 

import React, { Component } from 'react'

import ReactDom from 'react-dom' ;

class Hello extends Component{
    render(){
        return(
            <div>
                我是hello组件
                姓名：{this.props.name}
            </div>
        )
    }
}
// const testHellow =( Com) =>{              //prop 代理高阶组件
//     return class extends Component{
//         // constructor(props){
//         //    super(props)
//         //    this.setState={
//         //        sex="男",
//         //        hobby:"篮球"
//         //    }
//         // }

//         render(){
//             return(
//                 <div>
//                     <Com {...this.props}/>
//                 </div>
//             )
//         }
//     }
// }

const testHellow =( Com) =>{              //继承高阶组件
     return class extends Com{


         render(){
             return(
                <div>
                   新的
                    {super.render()}
                 </div>
           )
        }
    }
 }







let Test=testHellow(Hello)

class Gao extends Component {
    render() {
        return (
            
                <Test name="tzb"/>
           
        )
    }
}
ReactDom.render(  
    <Gao/>,
document.getElementById("root")
)