React_高阶组件的使用

1.什么是高阶组件?

官方的定义：高阶组件是参数为组件，返回值为新组件的函数；

高阶函数的维基百科定义：至少满足以下条件之一：

1. 接受一个或多个函数作为输入；
2. 输出一个函数；
3. avaScript中比较常见的filter、map、reduce都是高阶函数。

2. 高阶组件的调用过程类似于这样：

const EnhancedComponent = higherOrderComponent(WrappedComponent);

3.高阶函数的编写过程类似于这样：

function higherOrderComponent(WrappedComponent) {
  class NewCompoment extends PureComponent{
      render () {
        return <WrappedComponent/>
      }
  }
  NewCompoment.displayName = "CoderHzc"
}

3.1 组件的名称问题：
-- 在ES6中，类表达式中类名是可以省略的；
-- 组件的名称都可以通过displayName来修改；
3.2 高阶组件并不是React API的一部分，它是基于React的 组合特性而形成的设计模式；
3.3 高阶组件在一些React第三方库中非常常见：

4. 具体代码如下:

import React, { PureComponent } from 'react'

// 0.
 class App extends PureComponent {
  render() {
    return (
      <div>
        App 
      </div>
    )
  }
}
// 修改App名字问题
App.displayName = "CoderHzc"
// 1.定义一个高阶组件
function enhanceComponent(WrappedComponent) {
  return class NewComponent extends PureComponent {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }
}
// 2.
const EnhanceComponent = enhanceComponent(App)
// 3.
export default EnhanceComponent

5.高阶组件应用-增强props具体代码如下:

1. 引入createContext
   import React, { PureComponent, createContext } from 'react';
2. 创建Context
   // 创建Context
   const UserContext = createContext({
   nickname: "默认",
   level: -1,
   区域: "中国"
   });
   3.使用UserContext中有个Provider属性包裹组件
   <UserContext.Provider value={{nickname: "why", level: 90, region: "中国"}}>
   <Home/>

      <About/>
    </UserContext.Provider>

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

// 创建Context
const UserContext = createContext({
  nickname: "默认",
  level: -1,
  区域: "中国"
});
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;