react:高阶组件wrappedComponent

什么是高阶组件？

高阶部件是一种用于复用组件逻辑的高级技术，它并不是 React API的一部分，而是从React 演化而来的一种模式。 具体地说，高阶组件就是一个接收一个组件并返回另外一个新组件的函数！

解决什么问题？

随着项目越来越复杂，开发过程中，多个组件需要某个功能，而且这个功能和页面并没有关系，所以也不能简单的抽取成一个新的组件，但是如果让同样的逻辑在各个组件里各自实现，无疑会导致重复的代码。比如页面有三种弹窗一个有title，一个没有，一个又有右上角关闭按钮，除此之外别无它样，你总不能整好几个弹窗组件吧，这里除了tilte,关闭按钮其他的就可以做为上面说的基本材料。

高阶组件总共分为两大类

• 代理方式

1. 操纵prop

2. 访问ref（不推荐）

3. 抽取状态

4. 包装组件

• 继承方式

1. 操纵生命周期

2. 操纵prop

代理方式之 操纵prop

import React from 'react'
function HocRemoveProp (WrappedComponent) {
  return class WrappingComPonent extends React.Component{
    render() {
      const { user, ...otherProps } = this.props;
      return <WrappedComponent {...otherProps} />
    }
  }
}
export default HocRemoveProp;

增加prop

接下来我把简化了写法，把匿名函数去掉，同时换成箭头函数

import React from 'react'
const HocAddProp = (WrappedComponent，uid) =>
  class extends React.Component
 {
    render() {
      const newProps = {
        uid,
      };
      return <WrappedComponent {...this.props}  {...newProps}  />
    }
  }
export default HocAddProp;

两个高阶组件的使用方法：

1. const  newComponent = HocRemoveProp(SampleComponent);

2. const  newComponent = HocAddProp(SampleComponent,'1111111');

也可以利用decorator语法糖这样使用

import React, { Component } from 'React'；

@HocRemoveProp
class SampleComponent extends Component {

    render() {}
}
export default SampleComponent;

代理方式之 抽取状态

将所有的状态的管理交给外面的容器组件，这个模式就是 抽取状态 外面的容器就是这个高阶组件

const HocContainer = (WrappedComponent) =>
  class extends React.Component{
    constructor(props) {
      super(props)
      this.state = {
        name: ''
      }
    }
    onNameChange = (event) => {
      this.setState({
        name: event.target.value
      })
    }
    render() {
      const newProps = {
        name: {
          value: this.state.name,
          onChange: this.onNameChange
        }
      }
      return <WrappedComponent {...this.props} {...newProps} />
    }
  }

@HocContainer
class SampleComponent extends React.Component
 {
  render() {
    return <input name="name" {...this.props.name}/>
  }
}

这样当我们在使用这个已经被包裹的input组件（SampleComponent）时候 它的值就被放在了HocContainer高阶组件中，当很多这样的input组件都用这个HocContainer高阶组件时，那么它们的值都将保存在这个HocContainer高阶组件中

代理方式之 包装组件

const HocStyleComponent = (WrappedComponent, style) =>
  class extends React.Component{
    render() {
      return (
        <div style={style}>
          <WrappedComponent {...this.props} {...newProps} />
        </div>
      )
    }
  }

import HocStyleComponent from  './HocStyleComponent';
const colorSytle ={color:'#ff5555'}
const newComponent = HocStyleComponent(SampleComponent, colorSytle);

1. 代理方式下WrappedComponent会经历一个完整的生命周期，产生的新组件和参数组件是两个不同的组件，一次渲染，两个组件都会经历各自的生命周期

2. 而在继承方式下，产生的新组件和参数组件合二为一，super.render只是生命周期中的函数，变成一个生命周期。

继承方式之 操纵prop

const HOCPropsComponent = (WrappedComponent) =>
  class extends WrappedComponent{
    render() {
      const elementsTree = super.render();
      let newProps = {
        color: (elementsTree && elementsTree.type === 'div') ? '#fff': '#ff5555'
      };
      const props = Object.assign({}, elementsTree.props, newProps)
      const newElementsTree = React.cloneElement(elementsTree,props,elementsTree.props.children)
      return newElementsTree
    }
  }

这样就传入了新的props

React.cloneElement( element, [props], [...children])

克隆并返回一个新的 ReactElement ，新返回的元素会保留有旧元素的 props、ref、key，也会集成新的 props。