React.js高阶函数的定义与使用

/* 高阶函数的简单定义与使用
      一： 先定义一个普通组件
      二： 用function higherOrder(WrappendComponent) {
                return 
            } 将组件包裹起来，并用export default higherOrder将这个高阶函数抛出去
      三： 使用时先导入这个高阶函数，直接将组件以参数的方式传递进来即可
*/
import React,{Component} from 'react';

/** 
 * 定义高阶函数
 */
function higherOrder(WrappendComponent) {
    return class A extends Component {
        render() {
            return (
                // 这个 WrappendComponent 将被传递进来的组件代替
                <WrappendComponent />
            );
        }
    }
}
export default higherOrder;
// ===================================== 分界符 ==============================================
/** 
 * 使用高阶函数
 *   一： 先将高阶函数引入
 *   二： 将组件以参数的方式传递进去
 */
import higherOrder from './';
class B extends Component {
    render() {
        return (
            <div>
                子组件
            </div>
        );
    }
}
// 调用高阶函数：
export default higherOrder(B)

 高阶组件应用：

import React,{ Component } from 'react';
import './App.css';
import B from './b';
class App extends Component {
  render() {
    return (
      <div>
        <B name={'张三'} age={12}/>
      </div>
    );
  }
}

export default App;

import React,{Component} from 'react';
import A from './a';
/*
 *  普通显示组件
 */
class B extends Component {
    render() {
        return (
            <div>
                我的名字叫：{this.props.name}
                <br />
                我的年龄是：{this.props.age}
                <br />
                我的性别是：{this.props.sex}
                <br />
            </div>
        );
    }
}
// 调用高阶函数A：
export default A('提示')(B)

import React,{Component} from 'react';

/** 
 * 定义高阶函数 A
 */
export default (title) => WrappendComponent => class A extends Component {

    render() {
        // 通过取出 props 来控制要传入子组件的 props
        const {age, ...otherProps} = this.props
        return (
            <div>
                <div>                 X</div>
                {/* // 这个 WrappendComponent 将被传递进来的组件代替 */}
                <div>
                 // 在App.js中，我们并没有将sex这个属性传递给B,而是通过A高阶函数来传递
                 <WrappendComponent sex={'男'} {...otherProps}/>
                </div>
                
            </div>
        );
    }
}
// 上述三个页面执行流程：App.js渲染B.js定义的页面内容。而B.js调用了高阶函数A.js,所以实际留存为：App.js传递的值先到A.js高阶函数，A.js高阶函数对值进行处理然后再传递给B.js显示