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>{title}                 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顯示