高阶组件

高阶函数

高阶函数有如下特性：
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时各自独立的值。