文档章节

redux provider源码解析

l
 lovelan1314
发布于 2017/09/11 16:24
字数 421
阅读 307
收藏 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
博文 28
码字总数 27491
作品 0
南京
私信 提问
加载中

评论(0)

react-redux 源码解析一: Provider做了什么,发布订阅模式实现?

Provider做了什么,发布订阅模式实现? 使用过react的同学都知道,redux作为react公共状态管理容器,配合react-redux可以很好的派发更新,更新视图渲染的作用,那么对于react-redux是如何做到...

zl_Alien
昨天
0
0
让react用起来更得心应手——(react-redux)

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

梦想攻城狮
2018/10/25
0
0
React系列——react-redux之connect方法解析

connect简介 前方高能预警,有耐心才能看完文章!! react-redux仅有2个API,Provider和connect,Provider提供的是一个顶层容器的作用,实现store的上下文传递。 connect方法比较复杂,虽然代...

osc_azsn5lm2
2018/09/05
2
0
带着问题看 react-redux 源码实现

前言 Redux作为通用的状态管理器,可以搭配任意界面框架。所以并搭配react使用的话就要借助redux官方提供的React绑定库react-redux,以高效灵活的在react中使用redux。下面我们一起看看是rea...

潇湘待雨
2019/05/20
0
0
redux && react-redux源码解析

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

dlzhao
2018/09/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何将新的本地分支推送到远程Git存储库并进行跟踪?

问题: I want to be able to do the following: 我希望能够做到以下几点: Create a local branch based on some other (remote or local) branch (via git branch or git checkout -b ) 基......

技术盛宴
36分钟前
20
0
Python笔记:记pandas中几个好用的函数

pandas是python数据分析常用的库之一!从数据加载到预处理,从数据分析到可视化,pandas提供了一站式服务。而以下这几个聚合统计函数,更是好用! 本文主要讲解pandas中的7个聚合统计相关函数...

tengyulong
今天
23
0
使用“ let”和“ var”有什么区别? - What's the difference between using “let” and “var”?

问题: ECMAScript 6 introduced the let statement . ECMAScript 6引入了let语句 。 I've heard it that it's described as a "local" variable, but I'm still not quite sure how it beh......

javail
今天
17
0
如何将文件重置或还原到特定版本? - How can I reset or revert a file to a specific revision?

问题: I have made some changes to a file which has been committed a few times as part of a group of files, but now want to reset/revert the changes on it back to a previous ver......

fyin1314
今天
24
0
OSChina 周五乱弹 —— 头发和不要头发,你总要选一个

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《雾 缀じた街 ふたつのかげ》- Porkkana 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
59
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部