React的高阶函数

 高阶组件：就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件

函数模拟高阶组件

 1 最普通的方法，一个welcome方法，一个goodbye。两个函数先从localStorage中读取username，然后对username进行一些        处理

    function welcome(){

      let username = localStroage.getItem('username');

     console.log('welcome'+username);

   }

  function goobye(){

      let username = localStroage.getItem('username');

     console.log('goobye'+username);

   }

  welcome();

  goodbye();

  这两个方法都一句的代码是重复的，使用一个中间函数，读取username，他来负责将username传递给两个函数

  

  function wrapClass（warpPops）{

    let newComponent = () => {

         let name = localStorage.getItem('username');

         warpPops(name);

    }

    return newComponent;

}

   function welcome(username){

   console.log('welcome'+username);

  }

  function googbye(username){

   console.log('googbye'+username);

  }

 let wel = wrapClass(welcome);

 let goo = wrapClass(googbye);

  wel();

  goo();

从这里可以看出wrapClass函数就是一个‘高阶函数’，这个函数处理了username，然后将username传递到目标函数，而目标函数不用关心username是怎么来的

高阶组件

 高阶组件就是一个没有副作用的纯函数

export default (wrapComponent) => {

   class NewComponent extends React.Component{

          contructor(){

           super(props);

           this.state = {

              username:''

           }

         }

         componentWillMount(){

              let username = localStorage.getItem('username');

             this.setState({

              username

           })

          }

         render(){

               return(

                  <wrapComponent username={this.state.username}></wrapComponent>

               )

        }

   }

}

import wrapClass from 'wrapClass';

class Welcome extends React.Component{

  constructor(props){

   super(props);

   this.state = {

     username:''

   }

  componentDidMount(){

    let username = this.props.username;

    this.setState({

     username

   })

  }

  render(){

      return(

         <div>welcome {this.state.username}</div>

     )

  }

  }

}

wel = wrapClass(Welcome);

export default wel;

class Goobye extends React.Component{

  constructor(props){

   super(props);

   this.state = {

     username:''

   }

  componentDidMount(){

    let username = this.props.username;

    this.setState({

     username

   })

  }

  render(){

      return(

         <div>goodbye {this.state.username}</div>

     )

  }

  }

}

 

goo= wrapClass(Goodbye);

export default goo;

高阶组件就是把username通过props传递给目标组件了，目标组件只管从props里面拿来用就好了