高阶组件

1.高阶组件:组件间的公用功能抽象（设计模式）

2.高阶组件的定义:

（1）是一个函数

(2)接受一个组件返回一个新的组件

作用：组件间的公用功能抽象

3.定义一个公共的高阶组件 1.先引入React import React, { Component } from ‘react’

2.定义一个函数接受
第一个参数(注意:参数的首字母要大写，传入的组件名称)HocComponent
第二个参数传过来的值getProps

    function Hoc(HocComponent,getProps){
    
    let data={name:123}
    
        return class extends Component{
            componentDidMount(){
            
           注意: Hocomponent.displayName的值指的是在穿过来的组件定义（有两种方法）
           static disPlayName="当前组件的名称"在class里面
           在class下面定义Tablae.diaplayName="当前组件的名称"
            
                console.log(Hocomponent.displayName||"位置组件")
            }
            
            render(){
            注意：如果传入的组件里面包含有其他的组件要用{...this.props}传出去
            也可以向外边传值传值的时候要用解构的方式向外边传{...数据}
            {...this.props}//指得是传过来的组件里面有其他的组件或参数
            {...data}//指的是在高阶组件里面定义的数据向外边传，谁调用谁就可以接收到通过(this.props.name)在那个组件里面接收到
            {...getProps}//指的是接受到参数传到外边谁传的就只能在谁的页面接收
            
                return <Hocomponent {...this.props} {...data} {...getProps}></Hocomponent>
            }
            
        }
    }
    
    export default Hoc
    
    3.调用
        (1)先引入定义公共组件的文件
        import hoc from "./Hoc/hcontext";
        2.抛出的值改一下
        export default Hoc(Table,{user:"aaa"})
事件补充

事件的三个阶段

事件捕获阶段
处于事件阶段
事件冒泡阶段
react中的事件为合成事件（根据 W3C spec 来定义）

阻止冒泡 —— stopPropagation

阻止默认行为 —— preventDefault
高阶组件

官方定义：A higher-order component is a function that takes a component and returns a new component.

蹩脚的翻译：高阶组件就是接收一个组件并把一个新组件作为返回值的函数

原理：高阶函数
定义高阶组件

	import React, { Component } from 'react';
	const hoc = (WapperComponent)=>(
	  class extends Component{
	    constructor(props){
	       super(props)
	    }
	    render(){
	      const newProps = {
	        hoc:'我是高阶组件',
	      }
	      return <WapperComponent {...this.props} {...newProps} />
	    }
	  }
	)

export default hoc
注意事项

不要在render方法内使用高阶组件

必须将静态方法做拷贝

Refs属性不能贯穿传递

高阶组件可以传递所有的props属性给包裹的组件，但是不能传递refs引用