React高阶组件（秒懂篇）

React高阶组件（秒懂篇）

一、简单介绍

高阶组件类似高阶函数。

1. 高阶函数
   高阶函数就是一个函数，但 参数 和 返回值 为 函数。
2. 高阶组件
   高阶组件也是一个函数，但 参数 和 返回值 为 组件。

高阶组件出现是为了解决 组件冗余 问题。
高阶组件适用范围：多个组件具有相同／类似的方法。

二、使用方式

高阶组件的使用方式有以下两种。

使 用 方 式	描述	特点
属 性 代 理	高阶组件通过props给输入组件传递参数，输入组件直接使用 this.props.属性名 即可。	返回一个全新的组件，不可以获取输入组件的state、生命周期、方法。
反 向 继 承	高阶组件继承输入组件，可以得到输入组件的相关信息。	返回输入组件的子组件，可以获取输入组件的state、生命周期、方法。

三、实例

以下有三个需求：
Bob：通过localStorage查询自己的成绩，并表达自己的心情。（属性代理）
Lily：通过localStorage查询自己的成绩，并写一片日记。（属性代理）
Alice：通过localStorage查询自己的成绩，并打电话告诉妈妈。（反向继承）

我们可以发现，他们都需要通过localStorage查询成绩，如果三个组件都写这个功能的话，会造成代码冗余，这个时候高阶组件应运而生了。
我们把通过localStorage查询成绩放在高阶组件来实现。

1. 编写高阶组件 SearchGrade（属性代理）

import React, { Component } from 'react';

export function SearchGrade (InputComponent) {
	return class SearchGrade extents Component {
		constructor () {
			super();
			this.state = {
				grade: 0
			}
		}
		
		componentWillMount () {
	       let grade = localStorage.getItem('grade');
	       this.setState({
	           grade: grade
	       });
	   }
	   
		render () {
	       return <ComponentClass grade={ this.state.grade }/>
	   }
	}
}

2. 编写高阶组件 SearchGrade（反向继承）

import React from 'react';

export default function SearchGrade (InputComponent) {
   return class SearchGrade extends InputComponent {
       constructor () {
           super();
           
           this.state = {
               grade: '',
           }
           this.old = super();	// 获取父组件的实例对象
       }

       componentWillMount () {
           let grade = localStorage.getItem('grade');
           this.setState({
               grade: grade
           });
       }

       render () {
           return (
               <div className="aliceContainer">
                   <h2>My name is { this.old.state.name }, 我的名字是通过反向继承来获取的呢。</h2>
                   <ComponentClass grade={ this.state.grade }/>
               </div>
           )
       }
   }
}

4. 编写Bob组件

import React, { Component } from 'react';
import SearchGrade from '../../components/SearchGrade';

class Bob extends Component {
   render () {
       return (
           <div className="bobContainer">
               <h2>（属性代理）Bob: 哎，只考了 { this.props.grade } 分，再努力一点就可以考一百分了。</h2>
           </div>
       )
   }
}

Bob = SearchGrade(Bob);	// 使用高阶组件完成成绩查询。
export default Bob;

5. 编写Lily组件

import React, { Component } from 'react';
import SearchGrade from '../../components/SearchGrade';

class Lily extends Component {
   render () {
       return (
           <div className="bobContainer">
               <h2>（属性代理）Lily：哇，今天我居然考了 { this.props.grade } 分，太棒了，先去庆祝下。</h2>
           </div>
       )
   }
}

Lily = SearchGrade(Lily);	// 使用高阶组件完成成绩查询。
export default Lily;

6. 编写Alice组件

import React, { Component } from 'react';
import SearchGrade from '../../components/hoc/reExtend';

class Alice extends Component {
   constructor () {
       super();
       this.state = {
           name: 'Alice'
       }
   }
   
   render () {
       return (
           <div className="AliceContainer">
               <h2>(反向继承)Alice: 喂，妈妈，我考了 { this.props.grade } 分，其实再努力一点就可以考一百分了。</h2>
           </div>
       )
   }
}

Alice = SearchGrade(Alice);		// 使用高阶组件完成成绩查询。
export default Alice;

?：小伙伴们，看到这里后，是不是发现高阶组件很简单呢。