高阶组件

事件补充

事件的三个阶段

1. 事件捕获阶段
2. 处于事件阶段
3. 事件冒泡阶段

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引用