React源码阅读 - React 与 ReactDOM 阅读前提既要 - 《李俊扬的技术分享》

一 Symbol的使用
二阅读源码所需要的基本能力
原型链

https://github.com/a8397550/react-source-share.git

一 Symbol的使用

Symbol的使用
React源码中大量的使用Symbol来作为标示符，标识一些内容在无法使用Symbol时会使用32位Number作为标识符。

Iterator的使用，迭代器，每个实现了迭代器的对象都可以使用next()方法

/**
   * @description React的版本号
   */
  var ReactVersion = '16.9.0';
  /**
   * @description 检测是否支持Symbol用的
   */
  var hasSymbol = typeof Symbol === 'function' && Symbol.for;
  /**
   * @description Symbol.for('react.element')
   */
  var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
  /**
   * @description Symbol.for('react.portal')
   */
  var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
  /**
   * @description Symbol.for('react.fragment') 分组用的标识，React.Fragment允许将子列表分组，而无需向 DOM 添加额外节点
   */
  var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
  /**
   * @description 不知道这个是干什么的
   */
  var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
  /**
   * @description 不知道这个是干什么的
   */
  var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
  /**
   * @description  Symbol.for('react.provider') React.context.provider组件标识
   */
  var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
  /**
   * @description  Symbol.for('react.context') React.context组件标识
   */
  var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
  var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
  var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
  var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
  var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
  var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
  var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
  var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
  var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
  /**
   * @description 返回一个对象的Iterator方法，一般形参是一个array
   * @description 如果Symbol函数存在，就将如参的maybeIterable[Symbol.iterator]方法返回
   * @param {*} maybeIterable 
   */
  function getIteratorFn(maybeIterable) {
    if (maybeIterable === null || typeof maybeIterable !== 'object') {
      return null;
    }
    var maybeIterator = typeof Symbol === 'function' && maybeIterable[Symbol.iterator] || maybeIterable['@@iterator'];
    if (typeof maybeIterator === 'function') {
      return maybeIterator;
    }
    return null;
  }
var a = [1, 2, 3, 4];
var iterFn = getIteratorFn(a);
var b = iterFn.apply(a);
console.log(b.next());

二阅读源码所需要的基本能力

属性与属性描述符

一个对象具有三种类型的属性或方法，可枚举属性或方法，不可枚举属性或方法，
Symbol属性或方法。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

**Object.seal()**方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要可写就可以改变。

**Object.preventExtensions()**方法让一个对象变的不可扩展，也就是永远不能再添加新的属性。

Object的常用方法的使用
Object.prototype.hasOwnProperty; 此方法可以验证一个key是否是一个对象的属性或方法
Object.prototype.propertyIsEnumerable; 检测一个属性是否是可枚举属性
Object.assign; 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.getOwnPropertyNames 返回目标对象的可枚举属性与不可枚举属性的属性名组成的数组。
Object.defineProperty 设置属性描述符，一次只能设置一个属性
Object.defineProperties 批量设置属性描述符，可以一次性设置多个属性
Object.seal 密封一个对象
Object.getOwnPropertyDescriptor 返回目标对象的对应属性的属性描述符
Object.getOwnPropertySymbols; 此方法返回对象的Symbol的属性与方法
Object.freeze 冻结一个对象
Object.preventExtensions 不可扩展
Object.keys 返回一个对象的key组成的数组

对象每个属性都有属性描述符或存取描述符，详细可以参考MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Object.assign 的 Polyfill方法

继承链

通过验证实例的原型或者使用instanceof，验证实例是否属于某个类的，
例如React.Component的实例

原型链

函数实例

每个函数的实例都具有constructor属性，此属性会返回一个constructor对象，此对象中的prototype指向函数的原型对象。

可以通过Object.getPrototypeOf,Object.setPrototypeOf设置或获取某个实例或函数的原型对象

函数实例查找属性和方法的方式是，首先查找自身，然后一级一级向父级的函数原型对象上查找，直到null为止。
你可以通过proto 一直向上查找就会找到null了，但是这个属性并非标准的属性，而是浏览器厂商支持的，你可以通过Object.getPrototypeOf方式获取到实例的函数原型对象。

函数本身

静态属性
在ES6中class创建的类，有一个static的关键字，可以向函数声明属性和方法，不会被函数的实例查找到。

函数的原型对象

函数的原型上所有的属性和方法都可以被实例所使用，并且函数原型上具有一个prototype.constructor会指向函数本身

extends

var A = function() {};
A.prototype.a = 1;
var B = function() {
    this.b = 2;
};
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
var b = new B();
console.log(b.a, b.b);
console.log(B instanceof A) // false
console.log(A instanceof A) // true

new 如何实现

var a1 = Object.setPrototypeOf({ }, A.prototype);
A.apply(a1, []);

bind的实现

Function.prototype._bind = function(){
    var self = this   //原函数
    var context = [].shift.call(arguments)  //this上下文
    var args = [].slice.call(arguments)  //参数
    return function(){
        self.apply(context, args.concat([].slice.call(arguments)))
    }
}
if(!Function.prototype.bind){
  Function.prototype.bind = function(oThis){
    if(typeof this !== 'function'){
      throw new TypeError('被绑定的对象需要是函数')
    }
    var self = this
    var args = [].slice.call(arguments, 1)
    var func = function(){}
    fBound = function(){ // instanceof用来检测某个实例对象的原型链上是否存在这个构造函数的prototype属性，this instanceof func === true时,说明返回的fBound被当做new的构造函数调用，此时this=fBound(){}，否则this=window, 如果是的话使用新创建的this代替硬绑定的this
      return self.apply(this instanceof func ? this : oThis, args.concat([].slice.call(arguments)))
    }
    //维护原型关系
    if(this.prototype){
      func.prototype = this.prototype
    }
    //使fBound.prototype是func的实例，返回的fBound若作为new的构造函数，新对象的__proto__就是func的实例
    fBound.prototype = new func()
    return fBound
  }
}

React 与 ReactDOM 阅读前提既要