React源码浅入（一）

前言

React源码研究了好久，然后始终都不是很深入，都怪自己，代码看了就看了，今天看一点，明天看一点，第7天问问自己第一天看了什么的时候，就空白一片了，只知道这个函数调用过，具体做什么事情，不记得了。
既然，发现了问题，就决定好好的解决一下。一个模块一个模块的解决。有缘看见本文的人，欢迎指教，请轻拍~

---

栗子来源于阮一峰老师的demo：github.com/ruanyf/reac…
react版本：15.0.1（不要问我为什么不直接研究16.0，答案很简单，我自己当前的版本就是15.0.1，先把这个看完了，再一个版本一个版本的看！）

---

简单的略过，直接看核心：
demo1很简单，实现了一个hello world的栗子，先来看看demo1的代码：

ReactDOM.render(
       <span>Hello, world!</span>,
        document.getElementById('example')
);复制代码

经过babel转化，如下：

ReactDOM.render(React.createElement(
        'span',
        null,
        'Hello, world!'
), document.getElementById('example'));复制代码

我们一步步追踪，看看调用了哪些，结果如下图所示：

hello world调用函数顺序

可以看到，我们第一个调用的函数叫做createElement，那我们这篇主要讲下ReactElementValidator里面的内容。

ReactElementValidator

ReactElementValidator内，三个函数：

• createElement
• createFactory （楼主页不知道是个什么鬼。。）
• cloneElement

1. createElement

抛开一些react的内的验证代码，剩余代码如下：

createElement: function (type, props, children) {
    // type: 'span'; props: null; children:  'Hello, world!'
    var element = ReactElement.createElement.apply(this, arguments);
    if (element == null) {
      return element;
    }
    if (validType) {
      // 依次判断，是否为有效的ReactNode，
      // 以及当children是数组的时候，判断是否有Key值
      for (var i = 2; i < arguments.length; i++) {
        // 从children开始检查，<span>hello world</span>里。
        // arguments[i]： hello world, type: span
        validateChildKeys(arguments[i], type);
      }
    }
    validatePropTypes(element);
    return element;
  }复制代码

上面代码，可分为三个部分：

• 1、创建ReactNode。（最关键的地方）
• 2、判断是否为有效的ReactNode，以及当children是数组的时候，判断是否有Key值。
• 3、验证他的属性类型。
  这里先暂时放一下，我们会在React源码浅入（二）里重点看看ReactElement.createElement函数，详细了解。

2. cloneElement

我们再来看看cloneElement函数，函数代码短短几行，但是基本流程和createElement相似，都是，先创建ReactNode再验证。代码如下：

cloneElement: function (element, props, children) {
    var newElement = ReactElement.cloneElement.apply(this, arguments);
    for (var i = 2; i < arguments.length; i++) {
      validateChildKeys(arguments[i], newElement.type);
    }
    validatePropTypes(newElement);
    return newElement;
}复制代码

同样，我们在React源码浅入（二）里再探一探cloneElement函数。

3. createFactory

为什么把这个函数放在最后，因为我也不知道，这个函数到底是几个意思，没见过调用。欢迎大家批评指教。

4. 其他虾兵蟹将

• validateChildKeys
  • validateExplicitKey： 校验数组children 是否设定了key值
    • getAddendaForKeyUse
• validatePropTypes
  • checkPropTypes
  • getDeclarationErrorAddendum

再从另外一个维度看，如下图所示：

validateChildKeys函数详解（目的：检验children节点的key值是否存在）

validatePropTypes函数详解（目的：检测props类型，bool、function、isRequired...）