高次コンポーネント

高次関数
高次関数には、パラメータとして1.関数を渡すことができます。2.関数は戻り値として出力できます。
パラメータとして渡されます。
ここでは通常の使用法はコールバック関数です。

var getUserInfo = function( userId, callback ){
  $.ajax( 'http://xx.com/getUserInfo?' + userId, function( data ){
    if ( typeof callback === 'function' ){
      callback( data );
    }
  });
}
getUserInfo( 123, function( data ){ 
  alert ( data.userName );
});

一般的な方法をカプセル化して、個人化動作をコールバック関数に置くこともできます。高次関数では、受信したパラメータが関数であるかどうかを判断するだけでいいです。

var appendDiv = function( callback ){
  for ( var i = 0; i < 100; i++ ){
    var div = document.createElement( 'div' ); 
    div.innerHTML = i;
    document.body.appendChild( div );
    if ( typeof callback === 'function' ){
      callback( div );
    }
  }
};
appendDiv(function( node ){ 
  node.style.display = 'none';
});

戻り値として出力する

var isType = function( type ){ 
  return function( obj ){
    return Object.prototype.toString.call( obj ) === '[object '+ type +']';
  }
};

var isString = isType( 'String' ); 
var isArray = isType( 'Array' ); 
var isNumber = isType( 'Number' );

console.log( isArray( [ 1, 2, 3 ] ) );    //   ：true

高次コンポーネント
高次構成要素は高次関数の機能と類似しており，構成要素の多重化を同様に強化している。
彼はこのように成長します。

const HOC = (InnerComponent) => class extends React.Component{//     !!

    render(){
        return(
            
        )
    }

}

const Button = HOC((props) => {props.children}) //     

class Label extends React.Component{//    

    render(){
        return(
            {this.props.children}
        )
    }
}
const LabelHoc = HOC(Label)

class App extends React.Component{//   
    render(){
        return(
            

                button
                

                label
            
        )
    }
}
module.exports = App

HOCとは高次のコンポーネントであり、他のコンポーネントをパラメータとして導入すれば高次のコンポーネントが使用できます。
なお、高次コンポーネントによって登録されたコンポーネント間の相互作用はない。すなわち、高次構成要素にstateが定義されている場合、異なる構成要素がパラメータとして入ってきたとき、このstateはそれぞれ独立した値である。