高阶组件 -（2）

优化参数传递

import React from "react";
const {Provider, Consumer} = React.createContext({});
class Son1 extends React.Component {
  render() {
    return (
      <Consumer>{
        value => (<p>{value.name}</p>)
      }</Consumer>
    );
  }
}
class Son2 extends React.Component {
  render() {
    return (
      <Consumer>{
        value => (<span>{value.age}</span>)
      }</Consumer>
    );
  }
}
class Father1 extends React.Component {
  render() {
    return (
      <div>
        <Son1 />
      </div>
    );
  }
}
class Father2 extends React.Component {
  render() {
    return (
      <div>
        <Son2 />
      </div>
    );
  }
}

class App extends React.PureComponent {
  render() {
    return (
      <Provider value={{name: 'xiebenyin', 'age': 66}}>
        <h1>App</h1>
        <Father1 />
        <Father2 />
      </Provider>
    );
  }
}
export default App;

使用高阶组件优化

import React from "react";
const {Provider, Consumer} = React.createContext({});
class Son1 extends React.Component {
  render() {
    return (
      <p>{this.props.name}</p>
    );
  }
}
class Son2 extends React.Component {
  render() {
    return (
      <span>{this.props.age}</span>
    );
  }
}
function EnhancedComponent(WrappedComponent) {
  class Father extends React.PureComponent{
    render() {
      return (
        <Consumer>{
          value => {
            return (
              <WrappedComponent {...value}/>
            )
          }
        }</Consumer>
      )
    }
  }
  return Father;
}
const Father1 = EnhancedComponent(Son1);
const Father2 = EnhancedComponent(Son2);
class App extends React.PureComponent {
  render() {
    return (
      <Provider value={{name: 'xiebenyin', 'age': 66}}>
        <h1>App</h1>
        <Father1 />
        <Father2 />
      </Provider>
    );
  }
}
export default App;

• 使用高阶组件来优化传递参数 
•  {...value} 解构传递  props  参数