高阶函数和高阶组件

如果一个函数操作其他函数，即将其他函数作为参数或将函数作为返回值，将其称为高阶函数。

高阶组件(high-order component)类似于高阶函数，接收组件作为输入，输出一个新的组件。

实现高阶组件的方法有如下两种。

1. 属性代理(props proxy)。属性组件通过被包裹的 React 组件来操作 props。
2. 反向代理(inheritance inversion)。高阶组件继承于被包裹的 React 组件。

1. 属性代理

属性代理是常见高阶组件的实现方法。

const firstComponent = (SecondComponent) => {
    return class extends Component {
        render() {
            return (
                <SecondComponent
                    {...props}
                />
            )
        }
    }
}

export default firstComponent ;

//在 render 方法中返回传入 SecondComponent的 React 组件。这样就可以通过高阶组件来传递 props，这种方法即为属性代理。

原始组件想要具备高阶组件对它的修饰，有两种方式。

方式一： 

export default firstComponent;

class MyComponent extends Component {
}

export default firstComponent(MyComponent);

方式二： 

ES6 添加了 decorator 的属性，我们可以通过 decorator 来转换，以此简化高阶组件的调用。 

@firstComponent
class MyComponent extends Component {
}

export default MyComponent;

这样组件就可以一层层地作为参数被调用，原始组件就具备了高阶组件对它的修饰。这样保持了单个组件封装性的同时还保留了易用性。 

2. 反向继承代理

反向继承是另一种构建高阶组件的方法。因为被动地继承了 WrappedComponent，所有的调用都会反向。

const firstComponent = (SecondComponent) => {
    return class extends WrappedComponent {
        render() {
            return super.render();
        }
    }
}

export default MyContainer;

看一下实际react组件用法：

将公共的逻辑拿到外层组件，处理好后以属性的方式传递给原本的组件，为此高阶组件就是一个 React 组件包裹着另外一个 React 组件

import React from 'react';
let local = (key)=>(Component)=>{
  return class HighOrderComponent extends React.Component{
    constructor(){
      super();
      this.state = {val:''}
    }
    componentDidMount(){
      let username = localStorage.getItem(key)||'';
      this.setState({
        val:username
      })
    }
    render(){
      return <Component {...this.state}/>
    }
  }
};
export default local;

import Local from './Local'
class Username extends React.Component {
  render(){
    return( 
        <div>
          <input type="text" value={this.props.val} onChange={()=>{}}/>
        </div>)
  }
}
export default Local('username')(Username);