provider组件概念图
react-redux provider组件概念图
provider组件的作用
- provider包裹在根组件外层，使所有的子组件都可以拿到state。示例：
import React from 'react'; import {render} from "react-dom"; import {createStore} from 'redux'; import {Provider} from "react-redux"; import App from "./containers/App"; import reducer from "./reducer/index"; const store = createStore(reducer); render( <Provider store={store}> <App/> </Provider>, document.getElementById('app')); - 它接受store作为props，然后通过context往下传，这样react中任何组件都可以通过context获取store。
provider组件的原理
- 它的原理是React组件的context属性，请看源码。
export default class Provider extends Component { getChildContext() { return { store: this.store } } constructor(props, context) { super(props, context) this.store = props.store } render() { return Children.only(this.props.children) } } Provider.propTypes = { store: storeShape.isRequired, children: PropTypes.element.isRequired } Provider.childContextTypes = { store: storeShape.isRequired } 核心代码就这么多，显然，它是一个容器组件。
关键点在：getChildContext,保存了全局唯一的store,类似于全局变量，子组件后续可以通过this.context.store来访问。
通过context传递属性的方式可以大量减少通过props 逐层传递属性的方式,可以减少组件之间的直接依赖关系。
使用示例
最近在写项目，在我的项目中就使用了provider组件，想看更详细的用法，可以看https://github.com/second-Sale/second-sale代码。
作者：落花的季节
链接：https://www.jianshu.com/p/2501a9703d13
来源：简书