React学习：高阶组件

高阶组件的定义类比于高阶函数的定义：

• 高阶函数的定义：接收函数作为输入，输出另一个函数的一类函数，被称作高阶函数。
• 高阶组件的定义：接受React组件作为输入，输出一个新的React组件的组件。

高阶组件本质上也是一个函数，并不是一个组件，这一点一定不要弄错。

更通俗地描述为，高阶组件通过包裹（wrapped）被传入的React组件，经过一系列处理，最终返回一个相对增强（enhanced）的React组件，供其他组件调用。

高阶组件是React 中一个很重要且比较复杂的概念，高阶组件在很多第三方库（如Redux）中都被经常使用。在项目中用好高阶组件，可以显著提高代码质量。

---

一、初步应用

为什么React引入高阶组件？它长什么样？怎么用？
引入原因：为了减少代码冗余，提高代码质量。
主要功能：封装并分离组件的通用逻辑，让通用逻辑在组件间更好地被复用

我们先通过一个简单的例子说明一下：
假设有组件 MyComponent，要从 LocalStorage中获取数据，然后渲染数据到界面。我们可以这样写组件代码：

//功能：组件从 LocalStorage中获取数据并展示出来
class MyComponent extends React.Component{
   
    componentWillMount(){
        let data = localStorage.getItem('data');
        this.setState({data});
    }
    render(){
        return <div>{
  this.state.data}</div>;
    }
}

代码很简单，但当有其他组件也需要从 LocalStorage中获取同样的数据展示出来时，需要在每个组件都重复 componentWillMount中的代码，这显然是很冗余的。下面让我们来看看使用高阶组件可以怎么改写这部分代码。

1、一个参数

//*********  高阶组件  *********
function withPersistentData(WrappedComponent){
    //*** 返回新组件 ***
    return class extends React.Component{
   
        //*** 在新组件中统一处理数据 ***
        coponentWillMount(){
            let data = localStorage.getItem('data');
            this.setState({data});
        }
        render(){
            //*** 将获得到的数据以属性方式，传递给被包裹组件
            return <WrappedComponent da