react encapsulated using context decorator

2020-03-27

react encapsulated using context decorator

In traditional react context, the context is very cumbersome to use subassemblies, if you need to use context subcomponents many words

Each component needs to write consumer, if they can all use decorator, it would be a lot easier

Under compare:

Scenario 1: The traditional context

Each requires the use of context components are required to write consumer

 

React from Import 'REACT' ; 
Import MyContext from '../context.js' ; 

class {Son React.Component the extends 
  the render () { 
    return (
       // each component requires a context you need to use the consumer-packaged 
      // If there are one hundred and writing it ???? complicated very friendly! 
      <MyContext.Consumer>  
        {value => (
           <div> 
            <div> {value.name} </ div> 
            <div>} {value.age </ div> 
          </ div>         )}
       </MyContext.Consumer>
     ) 
  } 
} 
Export default Son;

 

Scenario 2: The cow p decorator

Which component to use to decorate

import React from 'react';
import MyContext from '../context.js';

function withUser(Component) { // 定义一个方法，这个方法就是decorator装饰器
  return class extends React.Component{ // 方法返回了一个组件 是将原组件装饰之后的组件
    render() {
      return (
        // 装饰器统一将原组件用Consumer包装起来 并将context的value值存在组件props的指定key中，这里是user
        <MyContext.Consumer> 
          {value => <Component user={value} {...this.props} />}
        </MyContext.Consumer>
      )
    }
  }
}

export default withUser;

 

 

import React from 'react';
import withUser from './decorator';

@withUser // 装饰器的参数默认就是下面的组件了
class Son extends React.Component {
  render() {
    return (
      <div>
        {/* 经过 装饰器装饰过的组件中 props中已经有了context的值了， key是user */}
        <div>{this.props.user.name}</div> 
        <div>{this.props.user.age}</div>
      </div>
    )
  }
}

export default Son;