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显示