文档章节

redux provider源码解析

l
 lovelan1314
发布于 2017/09/11 16:24
字数 421
阅读 26
收藏 0

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的元素。

© 著作权归作者所有

共有 人打赏支持
上一篇: web缓存技术
l
粉丝 3
博文 27
码字总数 23586
作品 0
南京
私信 提问
让react用起来更得心应手——(react-redux)

让react用起来更得心应手系列文章: 让react用起来更得心应手——(react基础简析) 让react用起来更得心应手——(react-router原理简析) 让react用起来更得心应手——(react-redux原理简...

梦想攻城狮
10/25
0
0
redux && react-redux源码解析

不能因为别人怀疑自己,但是可以通过别人启发自己 ! 昨天有人让我把他当小白讲讲redux,我表示理出来的逻辑并不是很明确,他可能是在教我如何写文章吧,我对自己写的东西,并不是很负责,目的...

dlzhao
09/17
0
0
揭开redux,react-redux的神秘面纱

16年开始使用react-redux,迄今也已两年多。这时候再来阅读和读懂redux/react-redux源码,虽已没有当初的新鲜感,但依然觉得略有收获。把要点简单写下来,一方面供感兴趣的读者参考,另一方面...

苏溪云
今天
0
0
初识react(三)在 react中使用redux来实现简版计数器

初识react(二) 实现一个简版的html+redux.js的demo 上篇文章已经把redux核心概念讲明白了,这里就不在废话啦,不了解的可以先去回顾下,接下来我们讲解下在react中如何使用redux,来实现一个...

言sir
09/18
0
0
一起学习造轮子(三):从零开始写一个React-Redux

本文是一起学习造轮子系列的第三篇,本篇我们将从零开始写一个React-Redux,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Promises/A+,Red...

JAVASCRIPT
07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

解析Node.js通过axios实现网络请求

本次给大家分享一篇node.js通过axios实现网络请求的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 1、使用Npm 下载axios n...

前端攻城老湿
3分钟前
0
0
深入浅出之React-redux中connect的装饰器用法@connect

这篇文章主要介绍了react-redux中connect的装饰器用法@connect详解,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 通常我们需要一...

前端攻城小牛
4分钟前
0
0
详解css BEM书写规范

BEM是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择器里...

前端小攻略
20分钟前
2
0
一个centos初始化脚本

概述 就是自己无聊写的一个脚本,欢迎使用,star,fork顺便关注我一波 https://github.com/bboysoulcn/centos 使用方法 这个是给最小化安装的centos使用的,在centos 7.5上测试过,当然其他的...

bboysoulcn
24分钟前
3
0
mybatis 自动维护 createdAt, updatedAt

SpringBoot Mybatis Plus公共字段自动填充功能

youngjdong
27分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部