摘要：開發(fā)環(huán)境比生產(chǎn)環(huán)境多了，，屬性，并且以及被凍結(jié)，無(wú)法修改配置。當(dāng)這個(gè)是元素的，那么其與是無(wú)法傳入新元素上的與。返回的元素相當(dāng)于其源碼與類似，不同的地方是在開發(fā)環(huán)境下不會(huì)對(duì)調(diào)用與對(duì)與進(jìn)行獲取攔截。

react相關(guān)庫(kù)源碼淺析

react ts3 項(xiàng)目

你將會(huì)明白：
react元素的key和ref為什么不會(huì)存在props上，并且傳遞，開發(fā)環(huán)境下與生產(chǎn)環(huán)境下處理key和ref的區(qū)別？
...

內(nèi)部方法

│   ├── hasValidRef ----------------------------- 檢測(cè)獲取config上的ref是否合法
│   ├── hasValidKey ----------------------------- 檢測(cè)獲取config上的key是否合法
│   ├── defineKeyPropWarningGetter ----- 鎖定props.key的值使得無(wú)法獲取props.key
│   ├── defineRefPropWarningGetter ----- 鎖定props.ref的值使得無(wú)法獲取props.ref
│   ├── ReactElement ------------ 被createElement函數(shù)調(diào)用，根據(jù)環(huán)境設(shè)置對(duì)應(yīng)的屬性

向外暴露的函數(shù)

│   ├── createElement ---------------------------- 生成react元素，對(duì)其props改造
│   ├── createFactory -------------------------------------- react元素工廠函數(shù)
│   ├── cloneAndReplaceKey ---------------------------- 克隆react元素，替換key
│   ├── cloneElement ----------------------------- 克隆react元素，對(duì)其props改造
│   ├── isValidElement ---------------------------------判斷元素是否是react元素 

通過(guò)Ref屬性的取值器對(duì)象的isReactWarning屬性檢測(cè)是否含有合法的Ref，在開發(fā)環(huán)境下，如果這個(gè)props是react元素的props那么獲取上面的ref就是不合法的，因?yàn)樵赾reatElement的時(shí)候已經(jīng)調(diào)用了defineRefPropWarningGetter。生產(chǎn)環(huán)境下如果config.ref !== undefined，說(shuō)明合法。

function hasValidRef(config) {
  //在開發(fā)模式下
  if (__DEV__) {
    //config調(diào)用Object.prototype.hasOwnProperty方法查看其對(duì)象自身是否含有"ref"屬性
    if (hasOwnProperty.call(config, "ref")) {
      //獲取‘ref’屬性的描述對(duì)象的取值器
      const getter = Object.getOwnPropertyDescriptor(config, "ref").get;
      //如果取值器存在，并且取值器上的isReactWarning為true，就說(shuō)明有錯(cuò)誤，返回false，ref不合法
      if (getter && getter.isReactWarning) {
        return false;
      }
    }
  }
  //在生產(chǎn)環(huán)境下如果config.ref !== undefined，說(shuō)明合法;
  return config.ref !== undefined;
}

通過(guò)key屬性的取值器對(duì)象的isReactWarning屬性檢測(cè)是否含有合法的key，也就是如果這個(gè)props是react元素的props那么上面的key就是不合法的，因?yàn)樵赾reatElement的時(shí)候已經(jīng)調(diào)用了defineKeyPropWarningGetter。邏輯與上同

function hasValidKey(config) {
  if (__DEV__) {
    if (hasOwnProperty.call(config, "key")) {
      const getter = Object.getOwnPropertyDescriptor(config, "key").get;
      if (getter && getter.isReactWarning) {
        return false;
      }
    }
  }
  return config.key !== undefined;
}

開發(fā)模式下，該函數(shù)在creatElement函數(shù)中可能被調(diào)用。鎖定props.key的值使得無(wú)法獲取props.key,標(biāo)記獲取props中的key值是不合法的，當(dāng)使用props.key的時(shí)候，會(huì)執(zhí)行warnAboutAccessingKey函數(shù)，進(jìn)行報(bào)錯(cuò)，從而獲取不到key屬性的值。

即如下調(diào)用始終返回undefined:

props.key

給props對(duì)象定義key屬性，以及key屬性的取值器為warnAboutAccessingKey對(duì)象
該對(duì)象上存在一個(gè)isReactWarning為true的標(biāo)志，在hasValidKey上就是通過(guò)isReactWarning來(lái)判斷獲取key是否合法
specialPropKeyWarningShown用于標(biāo)記key不合法的錯(cuò)誤信息是否已經(jīng)顯示，初始值為undefined。

function defineKeyPropWarningGetter(props, displayName) {
  const warnAboutAccessingKey = function() {
    if (!specialPropKeyWarningShown) {
      specialPropKeyWarningShown = true;
      warningWithoutStack(
        false,
        "%s: `key` is not a prop. Trying to access it will result " +
          "in `undefined` being returned. If you need to access the same " +
          "value within the child component, you should pass it as a different " +
          "prop. (https://fb.me/react-special-props)",
        displayName,
      );
    }
  };
  warnAboutAccessingKey.isReactWarning = true;
  Object.defineProperty(props, "key", {
    get: warnAboutAccessingKey,
    configurable: true,
  });
}

邏輯與defineKeyPropWarningGetter一致，鎖定props.ref的值使得無(wú)法獲取props.ref,標(biāo)記獲取props中的ref值是不合法的，當(dāng)使用props.ref的時(shí)候，會(huì)執(zhí)行warnAboutAccessingKey函數(shù)，進(jìn)行報(bào)錯(cuò)，從而獲取不到ref屬性的值。

即如下調(diào)用始終返回undefined:

props.ref

被createElement函數(shù)調(diào)用，根據(jù)環(huán)境設(shè)置對(duì)應(yīng)的屬性。

代碼性能優(yōu)化：為提高測(cè)試環(huán)境下，element比較速度，將element的一些屬性配置為不可數(shù)，for...in還是Object.keys都無(wú)法獲取這些屬性，提高了速度。

開發(fā)環(huán)境比生產(chǎn)環(huán)境多了_store，_self，_source屬性，并且props以及element被凍結(jié)，無(wú)法修改配置。

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // This tag allows 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 element.
    _owner: owner,
  };

  if (__DEV__) {
    element._store = {};

    // To make comparing ReactElements easier for testing purposes, we make
    // the validation flag non-enumerable (where possible, which should
    // include every environment we run tests in), so the test framework
    // ignores it.
    Object.defineProperty(element._store, "validated", {
      configurable: false,
      enumerable: false,
      writable: true,
      value: false,
    });
    // self and source are DEV only properties.
    Object.defineProperty(element, "_self", {
      configurable: false,
      enumerable: false,
      writable: false,
      value: self,
    });
    // Two elements created in two different places should be considered
    // equal for testing purposes and therefore we hide it from enumeration.
    Object.defineProperty(element, "_source", {
      configurable: false,
      enumerable: false,
      writable: false,
      value: source,
    });
    if (Object.freeze) {
      Object.freeze(element.props);
      Object.freeze(element);
    }
  }

  return element;
};

在開發(fā)模式和生產(chǎn)模式下，第二參數(shù)props中的ref與key屬性不會(huì)傳入新react元素的props上，所以開發(fā)模式和生產(chǎn)模式都無(wú)法通過(guò)props傳遞ref與key。生產(chǎn)模式下ref與key不為undefined就賦值給新react元素對(duì)應(yīng)的ref與key屬性上，開發(fā)模式下獲取ref與key是合法的（第二參數(shù)不是某個(gè)react元素的props，其key與ref則為合法），則賦值給新react元素對(duì)應(yīng)的ref與key屬性上。

使用 JSX 編寫的代碼將被轉(zhuǎn)成使用 React.createElement()

React.createElement API：

React.createElement(
  type,
  [props],
  [...children]
)

type(類型) 參數(shù)：可以是一個(gè)標(biāo)簽名字字符串（例如 "div" 或"span"），或者是一個(gè) React 組件 類型（一個(gè)類或者是函數(shù)），或者一個(gè) React fragment 類型。

props：將key，ref，__self，__source的屬性分別復(fù)制到新react元素的key，ref，__self，__source上，其他的屬性值，assign到type上的props上。當(dāng)這個(gè)props是react元素的props，那么其ref與key是無(wú)法傳入新元素上的ref與key。只有這個(gè)props是一個(gè)新對(duì)象的時(shí)候才是有效的。這里就切斷了ref與key通過(guò)props的傳遞。

children：當(dāng)children存在的時(shí)候，createElement返回的組件的props中不會(huì)存在children，如果存在的時(shí)候，返回的組件的props.children會(huì)被傳入的children覆蓋掉。

如下：

//創(chuàng)建Footer
class Footer extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            

                this is Footer {this.props.children}
            
        )
    }
}

//創(chuàng)建FooterEnhance
const FooterEnhance = React.createElement(Footer, null ,"0000000");

//使用Footer與FooterEnhance

    
    {FooterEnhance}

結(jié)果：

this is Footer aaaaa
this is Footer 0000000

可以看到：

第三個(gè)參數(shù)children覆蓋掉原來(lái)的children:aaaaa

由下面源碼也可知道：

第三個(gè)參數(shù)children也可以覆蓋第二參數(shù)中的children，測(cè)試很簡(jiǎn)單。

第二個(gè)參數(shù)props中的children會(huì)覆蓋掉原來(lái)組件中的props.children

const RESERVED_PROPS = {
  key: true,
  ref: true,
  __self: true,
  __source: true,
};

export function createElement(type, config, children) {
  let propName;

  // Reserved names are extracted
  const props = {};

  let key = null;
  let ref = null;
  let self = null;
  let source = null;

  //將config上有但是RESERVED_PROPS上沒(méi)有的屬性，添加到props上
  //將config上合法的ref與key保存到內(nèi)部變量ref和key
  if (config != null) {
    //判斷config是否具有合法的ref與key，有就保存到內(nèi)部變量ref和key中
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = "" + config.key;
    }

    //保存self和source
    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    // Remaining properties are added to a new props object
    //將config上的屬性值保存到props的propName屬性上
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        props[propName] = config[propName];
      }
    }
  }

  // Children can be more than one argument, and those are transferred onto
  // the newly allocated props object.
  //  如果只有三個(gè)參數(shù)，將第三個(gè)參數(shù)直接覆蓋到props.children上
  //  如果不止三個(gè)參數(shù)，將后面的參數(shù)組成一個(gè)數(shù)組，覆蓋到props.children上
  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    if (__DEV__) {
      if (Object.freeze) {
        Object.freeze(childArray);
      }
    }
    props.children = childArray;
  }

  // Resolve default props
  //  如果有默認(rèn)的props值，那么將props上為undefined的屬性設(shè)置初始值
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  //開發(fā)環(huán)境下
  if (__DEV__) {
      //  需要利用defineKeyPropWarningGetter與defineRefPropWarningGetter標(biāo)記新組件上的props也就是這里的props上的ref與key在獲取其值得時(shí)候是不合法的。
    if (key || ref) {
      //type如果是個(gè)函數(shù)說(shuō)明不是原生的dom標(biāo)簽，可能是一個(gè)組件，那么可以取
      const displayName =
        typeof type === "function"
          ? type.displayName || type.name || "Unknown"
          : type;
      if (key) {
        //在開發(fā)環(huán)境下標(biāo)記獲取新組件的props.key是不合法的,獲取不到值
        defineKeyPropWarningGetter(props, displayName);
      }
      if (ref) {
        //在開發(fā)環(huán)境下標(biāo)記獲取新組件的props.ref是不合法的,獲取不到值
        defineRefPropWarningGetter(props, displayName);
      }
    }
  }
  //注意生產(chǎn)環(huán)境下的ref和key還是被賦值到組件上
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

返回一個(gè)函數(shù)，該函數(shù)生成給定類型的 React 元素。
用于將在字符串或者函數(shù)或者類轉(zhuǎn)換成一個(gè)react元素，該元素的type為字符串或者函數(shù)或者類的構(gòu)造函數(shù)

例如：Footer為文章的類組件

console.log(React.createFactory("div")())
console.log(React.createFactory(Footer)())

返回的結(jié)果分別為：

$$typeof:Symbol(react.element)
key:null
props:{}
ref:null
type:"div"
_owner:null
_store:{validated: false}
_self:null
_source:null

$$typeof:Symbol(react.element)
key:null
props:{}
ref:null
type:? Footer(props)
_owner:null
_store:{validated: false}
_self:null
_source:null

源碼：

export function createFactory(type) {
  const factory = createElement.bind(null, type);
  factory.type = type;
  return factory;
}

克隆一個(gè)舊的react元素，得到的新的react元素被設(shè)置了新的key

export function cloneAndReplaceKey(oldElement, newKey) {
  const newElement = ReactElement(
    oldElement.type,
    newKey,
    oldElement.ref,
    oldElement._self,
    oldElement._source,
    oldElement._owner,
    oldElement.props,
  );

  return newElement;
}                                                                                    

判斷一個(gè)對(duì)象是否是合法的react元素，即判斷其$$typeof屬性是否為REACT_ELEMENT_TYPE

export function isValidElement(object) {
  return (
    typeof object === "object" &&
    object !== null &&
    object.$$typeof === REACT_ELEMENT_TYPE
  );
}    

cloneElement官方API介紹

        
React.cloneElement(
  element,
  [props],
  [...children]
)

使用 element 作為起點(diǎn)，克隆并返回一個(gè)新的 React 元素。 所產(chǎn)生的元素的props由原始元素的 props被新的 props 淺層合并而來(lái)，并且最終合并后的props的屬性為undefined，就用element.type.defaultProps也就是默認(rèn)props值進(jìn)行設(shè)置。如果props不是react元素的props，呢么props中的key 和 ref 將被存放在返回的新元素的key與ref上。

返回的元素相當(dāng)于：

{children}

其源碼與createElement類似，不同的地方是在開發(fā)環(huán)境下cloneElement不會(huì)對(duì)props調(diào)用defineKeyPropWarningGetter與defineRefPropWarningGetter對(duì)props.ref與props.key進(jìn)行獲取攔截。

react元素的key和ref為什么不會(huì)在props上，并且傳遞，開發(fā)環(huán)境下與生產(chǎn)環(huán)境下處理key和ref的區(qū)別？

creatElement函數(shù)中阻止ref、key等屬性賦值給props，所以react元素的key和ref不會(huì)在props上，并且在組件間通過(guò)props傳遞

for (propName in config) {
  if (
    hasOwnProperty.call(config, propName) &&
    !RESERVED_PROPS.hasOwnProperty(propName)
  ) {
    props[propName] = config[propName];
  }
}

開發(fā)環(huán)境下與生產(chǎn)環(huán)境下處理key和ref的區(qū)別：開發(fā)環(huán)境下還會(huì)調(diào)用defineRefPropWarningGetter與defineKeyPropWarningGetter，利用Object.defineProperty進(jìn)行攔截報(bào)錯(cuò)：

  Object.defineProperty(props, "key", {
    get: warnAboutAccessingKey,
    configurable: true,
  });

不能將一個(gè)react元素的ref通過(guò)props傳遞給其他組件。