React使用新版Context构建组件树工具注入

一、仓库地址

本文章基于React@16.3.0，讲解我是如何使用新版Context api做工具注入的。github地址

二、为什么要向组件注入工具

打个比方，在一个组件树中，通常可能会有多个组件会使用到ajax请求服务器获取数据，这时候你就必须在每个组件中引入ajax相关的库才能使用，如下：

// 入口js

// provider webpack中定义了alias
import { setProvider } from 'provider'
import detectAgent from 'provider/detect-agent'
import dateFormat from 'provider/format/date-format'
import storage from 'provider/storage'
import urlutils from 'provider/url-utils'

// 顶层需要注入的方法
let providers = Object.assign(
  {},
  detectAgent,
  dateFormat,
  storage,
  urlutils
)

render(
  // Context.Provider注入方法，供子组件使用
  setProvider(App, providers),
  document.getElementById('app')
)

        

          
        
        
        

          

          AI 代码解读
        
      
      

// provider/index.js

export const Context = React.createContext()

// 传入根节点与基础工具，采用Context.Provider对跟组件进行包装
export const setProvider = (RootComponent, providers) => {
  return (
    <Context.Provider value={providers}>
      <RootComponent></RootComponent>
    </Context.Provider>
  )
}

/**
 * 用注解@的方式给子组件注入全局方法
 * @param {component} RealComponent 
 * 
 * 如： @injectMethods
 *     class TestComponent extends Component {}
 * 
 * 通过上面的方式就可将存储在顶层的方法注入进组件的props属性中
 */
export const injectMethods = (RealComponent) => {
  return class extends Component {
    render () {
      return (
        <Context.Consumer>
          { value => <RealComponent {...value} {...this.props}></RealComponent> }
        </Context.Consumer>
      )
    }
  }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

import { injectMethods } from 'provider'

// 给TestProvider的props注入顶层的方法
@injectMethods
export default class TestProvider extends Component {
  componentDidMount () {
    // 任意组件都可通过injectMethods注入全局方法
    console.log('test-provider已向props注入全局方法')
    console.log(this.props)
  }

  render () {
    let { $dateFormat } = this.props;

    return (
      <div>
        <p>test-provider</p>
        <p>{ $dateFormat(new Date()) }</p>
      </div>
    )
  }
}

        

          
        
        
        

          

          AI 代码解读