文档章节

redux provider源码解析

l
 lovelan1314
发布于 2017/09/11 16:24
字数 421
阅读 17
收藏 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的元素。

© 著作权归作者所有

共有 人打赏支持
l
粉丝 1
博文 25
码字总数 23863
作品 0
南京
一起学习造轮子(三):从零开始写一个React-Redux

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

JAVASCRIPT
07/04
0
0
Redux源码分析之bindActionCreators

Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分析之compose Redux源码分析之applyMiddleware bindAct...

淡色的云
2017/08/03
0
0
如何在非 React 项目中使用 Redux

本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息。 目录 1、前言 2、单纯使用 Redux 的问题 2.1、问...

胡子大哈
2017/06/28
0
0
Redux-thunk快速入门

前言 最近刚刚完成了毕业答辩,我的毕设内容是基于React系列技术栈开发的一个类似Instagram的Web App,戳此看看。开发完后,我惊奇的发现:咦,之前就听说有个叫做redux-thunk的东西,我怎么没...

Guohjia
05/22
0
0
react-redux源码学习笔记

react-redux源码结构 -- index.js -- utils shallowEqual.js storeShape.js warning.js wrapActionCreators.js --components Provider.js connect.js 为了方便解读,先从基础方法开始 index.......

chapin
2016/07/10
266
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Go语言_通神之路(2)

1、包 每个Go程序都是由包构成,从main包开始运行,就是我上一篇讲到的,都是从main函数开始执行,但是必须在main包下面! package mainimport ( "fmt" "math/rand")func ...

木九天
昨天
2
0
51.php-fpm的pool 慢日志 open_basedir 进程管理

12.21 php-fpm的pool 12.22 php-fpm慢执行日志(测试时报错) 12.23 open_basedir 12.24 php-fpm进程管理 12.21 php-fpm的pool: php-fpm里的pool也叫池子,咱们之前加入过www的配置,这个w...

王鑫linux
昨天
0
0
java内存模型概述

1、Java虚拟机运行时数据分区图 程序计数器:线程私有,是一块较小的内存空间,它是当前线程所执行的字节码文件的行号指示器 java虚拟机栈:线程私有,其生命周期与线程相同,这也就是我们平...

京一
昨天
0
0
shell学习之test语法

因为if-then语句不能测试退出状态码之外的条件,所以提供了test, 如果test命令中列出的条件成立,test命令就会退出并返回退出状态码0;如果条件不成立,test命令就会退出并返回非零的退出状态...

woshixin
昨天
0
0
openJDK之如何下载各个版本的openJDK源码

如果我们需要阅读openJDK的源码,那么需要下载,那么该去哪下载呢? 现在JDK已经发展到版本10了,11已经处于计划中,如果需要特定版本的openJDK,它们的下载链接在哪呢? 1.openJDK的项目 链接...

汉斯-冯-拉特
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部