一、仓库地址
本文章基于React@16.3.0，讲解我是如何使用新版Context api做工具注入的。github地址
二、为什么要向组件注入工具
打个比方，在一个组件树中，通常可能会有多个组件会使用到ajax请求服务器获取数据，这时候你就必须在每个组件中引入ajax相关的库才能使用，如下：
import ajax from 'ajax'
export default class App extends Component {
...
componentDidMount () {
ajax.get('http://xxx.com/a')
.then(res => {
...
})
}
...
}
而每个组件对于工具的依赖也不相同，那么则会有相当多的库引入语句。
// a.jsx
import ajax from 'ajax'
//b.jsx
import ajax from 'ajax'
import storage from 'storage'然而我并不想每一个组件在我需要用到这种基础工具的时候都要去单独引入这些工具，那么对于多入口的react项目来说，我们可不可以在入口处让工具存放在组件树的顶层，需要的时候我就将顶层的工具注入到对应的子组件，然后通过this去访问对应的工具进行使用呢
// 通过引入一个注解就可以注入顶层放置的工具函数
import { injectMethods } from 'provider'
@injectMethods
export default class TestProvider extends Component {
...
componentDidMount () {
this.props.ajax.get('http://xxx.com/a')
.then(res => {
...
})
this.props.storage.setItem('key', 'value')
}
...
}
这样我们就不需要关注组件的工具引入了，统一在顶层进行管理，当然你也可以注入其余的全局属性
三、实现
新版的React采取声明式的方式使用Context api，这是react官方Context用法的说明，下面我们先看看我们的入口是如何将工具存储在顶层的Provider中的
// 入口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')
)
// 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>
)
}
}
}
在入口文件中，我们会将方法统一放置在Context.Provider组件中，之后通过Context.Consumer组件去获取Provider中存储的value，将工具注入到子组件的props中，injectMethods是一个注解，如果你的一个组件需要获取顶层的工具，直接在组件上进行注解就可以注入到props中了
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>
)
}
}
当然，这种方式还可以对统一对组件树中的一些常量进行管理，需要的时候就注入到props中使用。
原文发布时间为：2018年06月28日
原文作者：bug给我滚
本文来源： 掘金 如需转载请联系原作者
