React 源码浅析之 - onlyChildren

Create at 2017 09 21 • 2 min read • 技术 • ReactSourceCode

这个模块的代码非常简单，短短十几行。

var ReactElement = require("ReactElement")

var invariant = require("fbjs/lib/invariant")
function onlyChild(children) {
  invariant(
    ReactElement.isValidElement(children),
    "React.Children.only expected to receive a single React element child."
  )
  return children
}

module.exports = onlyChild

就是判断传入的 children 是不是一个合法的 React 元素，否则就抛错出来。判断的逻辑就在 ReactElement 模块里面：

ReactElement.isV
Read more

React 源码浅析之 - ReactElement

Create at 2017 09 21 • 6 min read • 技术 • ReactSourceCode

ReactElement

这个模块定义了 React 元素的行为和方法，首先看 ReactElement 函数：

ReactElement

var ReactElement = function (type, key, ref, self, source, owner, props) {
  var element = {
    // This tag allow us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this e
Read more

React 源码浅析之 - ReactChildren

Create at 2017 09 21 • 11 min read • 技术 • ReactSourceCode

引入的模块

var ReactElement = require("ReactElement")

var emptyFunction = require("fbjs/lib/emptyFunction")
var invariant = require("fbjs/lib/invariant")

我们来看一下 ReactElement 模块，其他两个都是工具函数，不用关心。

Export 的对象

var ReactChildren = {
  forEach: forEachChildren,
  map: mapChildren,
  count: countChildren,
  toArray: toArray,
}

module.exports = ReactChildren

依次来看一下这个四个 API

forEach
Read more

React 源码浅析之 - ReactBaseClasses

Create at 2017 09 21 • 8 min read • 技术 • ReactSourceCode

引入的模块

var ReactNoopUpdateQueue = require("ReactNoopUpdateQueue")

var emptyObject = require("fbjs/lib/emptyObject")
var invariant = require("fbjs/lib/invariant")
var lowPriorityWarning = require("lowPriorityWarning")

其中， ReactNoopUpdateQueue 是默认的 updater ，用来提供 update, replaceState, setState 的入队操作，但可能是由于是默认 updater 的原因，只提供了 API 和对入参的校验，但没有提供实际的功能。比如：

Read more

React 源码浅析之 - 入口文件

Create at 2017 09 21 • 2 min read • 技术 • ReactSourceCode

本系列文章以 react 最新的版本： 16.0.0-beta.5 为准。 首先我们入口文件 ReactEntry.js 来看，

var ReactBaseClasses = require("ReactBaseClasses")
var ReactChildren = require("ReactChildren")
var ReactElement = require("ReactElement")
var ReactVersion = require("ReactVersion")

var onlyChild = require("onlyChild")

依赖模块： • ReactBaseClasses • ReactChildren • ReactElement • onlyChild • ReactElementValidator 接着:

var createElement = ReactElem
Read more

Redux 源码解读（长文慎入）

Create at 2017 08 18 • 25 min read • 技术 • ReduxSourceCode

Redux 的源码非常的精炼，短短几百行代码，确提供了强大的功能。今天，我们就来一探究竟。

看源码最简单的方式，就是从入口文件来看，看它依赖哪些模块，然后在依次看这些模块的内容，最后也就对整个代码有个清晰的认识了。

所以我们就从入口文件开始来看：

import applyMiddleware from "./applyMiddleware"
import bindActionCreators from "./bindActionCreators"
import combineReducers from "./combineReducers"
import compose from "./compose"
import createStore from "./createStore"
import warning from "./utils/warning"

/*
 * This is a dummy function to check if the function name ha
Read more