react手机端Web前端之路React

react-redux中的Provider组件

2017-05-03  本文已影响9453人  7天苹果
Provider

Provider功能主要为以下两点:

核心代码很精简:


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
}

注: context可以使子孙组件直接获取父级组件中的数据或方法,而无需一层一层通过props向下传递。context对象相当于一个独立的空间,父组件通过getChildContext()向该空间内写值;定义了contextTypes验证的子孙组件可以通过this.context.xxx,从context对象中读取xxx字段的值。

使用实例

之前研究connect的原理时写了一个计数器,现在我们可以将其中的Provider组件写成源码的形式使用,在具体环境下能更好地理解它地原理和效果,具体代码请看:
https://github.com/lipeishang/react-redux-provider-demo

上一篇下一篇

猜你喜欢

热点阅读