react解析 React.createElement(一)

HerryLo發表於2019-05-12
React

感謝 yck: 剖剖析 React 原始碼解析，本篇文章是在讀完他的文章的基礎上，將他的文章進行拆解和加工，加入我自己的一下理解和例子，便於大家理解。覺得yck寫的真的很棒 。React 版本為 16.8.6，關於原始碼的閱讀，可以移步到yck react原始碼解析

本文永久有效連結：react解析: React.createElement 

在我們使用React開發專案的過程中，react的引入是必不可少的，因為babel會將JSX語法編譯為React.createElement，如下

現在可以定位到ReactElement.js ,檢視程式碼,  檔案閱讀 createElement 函式的實現

createElement接受三個引數：

export function createElement(type, config, children) {
  // ...省略
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}複製程式碼

type指代這個ReactElement的型別，config 是指元素的屬性，children是指子元素，return 呼叫 ReactElement函式。

// 省略部分
// function createElement中，對於 config 的處理
if (config != null) {
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = '' + config.key;
    }
    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        props[propName] = config[propName];
      }
    }
  }複製程式碼

這段程式碼對 ref 以及 key 做了處理，然後遍歷 config 並把內建的幾個屬性（比如 ref 和 key）放入 props 物件中。

// 省略部分
// function createElement中，對於 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];
    }
    props.children = childArray;
  }複製程式碼

因為會巢狀多個子元素, 所以childrenLength是大於等於一的。把第二個引數之後的引數取出來，這時候 props.children 會是一個陣列，否則是一個物件。因此我們需要注意在對 props.children 進行遍歷的時候要注意它是否是陣列。最後我們來看看ReactElement函式

// function createElement中，返回 一個 ReactElement 物件
// 呼叫的 ReactElement 函式
const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    $$typeof: REACT_ELEMENT_TYPE,
    type: type,
    key: key,
    ref: ref,
    props: props,
    _owner: owner,
  };
  // ...省略
  return element
}複製程式碼

其中$$typeof是用來幫助我們識別這是一個 ReactElement, 下面我們來看看，經過createElement轉換之後的ReactElement。

下面是列印出來App元件

react解析: React.Children(二)

參考：

yck: 剖剖析 React 原始碼

Jokcy 的 《React 原始碼解析》: react.jokcy.me/


相關文章