高阶组件

高阶组件的英文是 Higher-Order Components，简称为 HOC；
官方的定义：高阶组件是参数为组件，返回值为新组件的函数；
我们可以进行如下的解析： p 首先，高阶组件本身不是一个组件，而是一个函数；
其次，这个函数的参数是一个组件，返回值也是一个组件；

定义

import React, { PureComponent } from 'react'

class App extends PureComponent {
  render() {
    console.log(this.props);
    return (
      <div>
        App: {this.props.name}
      </div>
    )
  }
}

// 类组件
// function enhanceComponent(WrappedComponent) {
//   class NewComponent extends PureComponent {
//     render() {
//       // return <WrappedComponent name={this.props.name} />
//       return <WrappedComponent {...this.props} />
//     }
//   }

//   NewComponent.displayName = "Kobe";
//   return NewComponent;
// }

// 函数组件
function enhanceComponent(WrappedComponent) {
  function NewComponent(props) {
    return <WrappedComponent {...props}/>
  }

  NewComponent.displayName = "Kobe";
  return NewComponent;
}

const EnhanceComponent = enhanceComponent(App);

export default EnhanceComponent;

应用1-增强props

import React, { PureComponent } from 'react';

// 定义一个高阶组件
function enhanceRegionProps(WrappedComponent) {
  return function aaa(props){
    return <WrappedComponent {...props} region="中国"/>
  }
  // return props => {
  //   return <WrappedComponent {...props} region="中国"/>
  // }

  /*  为什么props有值
      因为调用enhanceRegionProps高阶组件(本质还是函数),
      会返回一个函数(也可以说是函数组件),
      然后const EnhanceHome = enhanceRegionProps(Home),
      调用了enhanceRegionProps高阶组件(函数)，
      返回了一个aaa函数(函数组件)给EnhanceHome,
      等于EnhanceHome就aaa函数(函数组件),
      然后<EnhanceHome nickname="coderwhy" level={90}/>
      这里EnhanceHome就是函数组件了，
      因此nickname和level都可以通过aaa函数的形参props获取
  */
}

class Home extends PureComponent {
  render() {
    return <h2>Home: {`昵称: ${this.props.nickname} 等级: ${this.props.level} 区域: ${this.props.region}`}</h2>
  }
}


class About extends PureComponent {
  render() {
    return <h2>About: {`昵称: ${this.props.nickname} 等级: ${this.props.level} 区域: ${this.props.region}`}</h2>
  }
}


/*
  一般情况下是默认导出Home组件，然后其他地方import Home from ''
  别人以为导入的是Home，其实导入的是这里导出的enhanceRegionProps(Home)
  然后就可以在其他地方直接使用<Home />和<About />
  export default enhanceRegionProps(Home);
  export default enhanceRegionProps(About);
*/

// 这里因为没有导出，想用enhanceRegionProps(Home)就得这样
const EnhanceHome = enhanceRegionProps(Home);
const EnhanceAbout = enhanceRegionProps(About);

class App extends PureComponent {
  render() {
    return (
      <div>
        App
        <EnhanceHome nickname="coderwhy" level={90}/>
        <EnhanceAbout nickname="kobe" level={99}/>
      </div>
    )
  }
}

export default App;

import React, { PureComponent } from 'react';

// 定义一个高阶组件
function enhanceRegionProps(WrappedComponent) {
  return function aaa(props){
    return <WrappedComponent {...props} region="中国"/>
  }
  // return props => {
  //   return <WrappedComponent {...props} region="中国"/>
  // }

  /*  为什么props有值
      因为调用enhanceRegionProps高阶组件(本质还是函数),
      会返回一个函数(也可以说是函数组件),
      然后const EnhanceHome = enhanceRegionProps(Home),
      调用了enhanceRegionProps高阶组件(函数)，
      返回了一个aaa函数(函数组件)给EnhanceHome,
      等于EnhanceHome就aaa函数(函数组件),
      然后<EnhanceHome nickname="coderwhy" level={90}/>
      这里EnhanceHome就是函数组件了，
      因此nickname和level都可以通过aaa函数的形参props获取
  */
}

class Home extends PureComponent {
  render() {
    return <h2>Home: {`昵称: ${this.props.nickname} 等级: ${this.props.level} 区域: ${this.props.region}`}</h2>
  }
}


class About extends PureComponent {
  render() {
    return <h2>About: {`昵称: ${this.props.nickname} 等级: ${this.props.level} 区域: ${this.props.region}`}</h2>
  }
}


/*
  一般情况下是默认导出Home组件，然后其他地方import Home from ''
  别人以为导入的是Home，其实导入的是这里导出的enhanceRegionProps(Home)
  然后就可以在其他地方直接使用<Home />和<About />
  export default enhanceRegionProps(Home);
  export default enhanceRegionProps(About);
*/

// 这里因为没有导出，想用enhanceRegionProps(Home)就得这样
const EnhanceHome = enhanceRegionProps(Home);
const EnhanceAbout = enhanceRegionProps(About);

class App extends PureComponent {
  render() {
    return (
      <div>
        App
        <EnhanceHome nickname="coderwhy" level={90}/>
        <EnhanceAbout nickname="kobe" level={99}/>
      </div>
    )
  }
}

export default App;

应用2-增强props-Context-默认

import React, { PureComponent, createContext } from 'react';

// 创建Context
const UserContext = createContext({
  nickname: "默认",
  level: -1,
  region: "世界"
});

class Home extends PureComponent {
  render() {
    return (
      <UserContext.Consumer>
        {
          user => {
            return <h2>Home: {`昵称: ${user.nickname} 等级: ${user.level} 区域: ${user.region}`}</h2>
          }
        }
      </UserContext.Consumer>
    )
  }
}

class About extends PureComponent {
  render() {
    return (
      <UserContext.Consumer>
        {
          user => {
            return <h2>About: {`昵称: ${user.nickname} 等级: ${user.level} 区域: ${user.region}`}</h2>
          }
        }
      </UserContext.Consumer>
    )
  }
}

class App extends PureComponent {
  render() {
    return (
      <div>
        App
        <UserContext.Provider value={{ nickname: "why", level: 90, region: "中国" }}>
          <Home />
          <About />
        </UserContext.Provider>
      </div>
    )
  }
}

export default App;

应用3-增强props-Context-改进

import React, { PureComponent, createContext } from 'react';

// 定义一个高阶组件
function withUser(WrappedComponent) {
  // 返回一个函数组件
  return props => {
    // 返回jsx
    return (
      <UserContext.Consumer>
        {
          user => {
            // 给WrappedComponent传props值(如：<UserHome pwd={123456}/>的pwd)
            // 以及context的value值(这里起user别名)，<UserContext.Provider value...>
            // 然后WrappedComponent组件(即withUser这个高阶组件的形参)就能拥有props的值和context的值了
            // 约等于父子组件传值，父组件将{...props} {...user}数据传给WrappedComponent子组件

            // return <WrappedComponent 
            //           nickname={user.nickname}
            //           level={user.level}
            //           region={user.region}
            //           pwd={props.pwd}
            //           hobby={props.hobby}
            //         />
            return <WrappedComponent {...props} {...user}/>
          } 
        }
      </UserContext.Consumer>
    )
  }
}

// 创建Context
const UserContext = createContext({
  nickname: "默认",
  level: -1,
  region: "世界"
});

class Home extends PureComponent {
  render() {
    return <h2>Home: {`昵称: ${this.props.nickname} 密码: ${this.props.pwd} 等级: ${this.props.level} 区域: ${this.props.region}`}</h2>
  }
}


class About extends PureComponent {
  render() {
    return <h2>About: {`昵称: ${this.props.nickname} 密码: ${this.props.hobby} 等级: ${this.props.level} 区域: ${this.props.region}`}</h2>
  }
}

class Detail extends PureComponent {
  render() {
    return (
      <ul>
        <li>{this.props.nickname}</li>
        <li>{this.props.level}</li>
        <li>{this.props.region}</li>
      </ul>
    )
  }
}


const UserHome = withUser(Home);
const UserAbout = withUser(About);
const UserDetail = withUser(Detail);

class App extends PureComponent {
  render() {
    return (
      <div>
        App
        <UserContext.Provider value={{nickname: "why", level: 90, region: "中国"}}>
          <UserHome pwd={123456}/>
          <UserAbout hobby={'coding'}/>
          <UserDetail/>
        </UserContext.Provider>
      </div>
    )
  }
}

export default App;

react高阶组件

高阶组件

定义

应用1-增强props

应用2-增强props-Context-默认

应用3-增强props-Context-改进

应用3-登录鉴权