redux provider源码解析

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3647713/blog/1535249

文章标签：

#javascript #python #ViewUI

本文详细介绍了 React 中 Provider 组件的实现原理与使用方法。包括如何通过构造函数获取 store、利用 getChildContext 将 store 放入 context 中，以及如何通过 ContextTypes 访问 store。此外还介绍了与 Redux 2.x 和 React Redux 2.x 版本更新相关的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

provider 源码

import { Component, Children } from 'react'
import PropTypes from 'prop-types'
import storeShape from '../utils/storeShape'
import warning from '../utils/warning'
let didWarnAboutReceivingStore = false

function warnAboutReceivingStore() {
  if (didWarnAboutReceivingStore) {
    return
  }
  didWarnAboutReceivingStore = true
  warning(
    '<Provider> does not support changing `store` on the fly. ' +
    'It is most likely that you see this error because you updated to ' +
    'Redux 2.x and React Redux 2.x which no longer hot reload reducers ' +
    'automatically. See https://github.com/reactjs/react-redux/releases/' +
    'tag/v2.0.0 for the migration instructions.'
  )
}

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)
  }
}

if (process.env.NODE_ENV !== 'production') {
  Provider.prototype.componentWillReceiveProps = function (nextProps) {
    const { store } = this
    const { store: nextStore } = nextProps

    if (store !== nextStore) {
      warnAboutReceivingStore()
    }
  }
}

Provider.propTypes = {
  store: storeShape.isRequired,
  children: PropTypes.element.isRequired
}
Provider.childContextTypes = {
  store: storeShape.isRequired
}

首先学习react数据传递三种方法，props，state，context

props：一般用于将父组件数据传递到子组件，不能跨组件传递

state：state是内部状态或者局部状态
es6数据解析操作，let {xxx ,xx, x} = this.state;

context: 和props相比，context可以跨组件传递信息

声明context步骤一：

constructor(props, context) {
    super(props, context)
    this.store = props.store
  }

getChildContext() {
    return { store: this.store }
  }

更具react生命周期，首先constructor方法获取属性store，getChildContext()将store放入context中

步骤二：

Provider.propTypes = {
  store: storeShape.isRequired,
  children: PropTypes.element.isRequired
}

验证组件信息

步骤三：

Provider.childContextTypes = {
  store: storeShape.isRequired
}

声明了childrenContextTypes。如果不声明的话，将无法在组件中使用getChildContext()方法；

获取context：

子树中的任何组件都可以通过定义ContextTypes 去访问它。

connect中通过

  Connect.contextTypes = {

      store: storeShape

    }

然后通过constructor获取store

constructor(props, context) {

        super(props, context)

        this.version = version

        this.store = props.store || context.store

         const storeState = this.store.getState()

        this.state = { storeState }

        this.clearCache()

      }

最后执行render渲染，返回一个react子元素。Children.only是react提供的方法，this.props.children表示的是只有一个root的元素。

转载于:https://my.oschina.net/u/3647713/blog/1535249