【React源碼解讀】react-element

在線源碼地址：https://github.com/facebook/react/blob/master/packages/react/src/ReactElement.js

// 源碼 ReactElement.js
export function createElement(type, config, children) {
  // 處理參數

  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

/** 
type: 節點類型

原生節點 string
本身申明組件 classComponent funcitonComponent
使用react原生組件（Symbol，會被特殊處理）
  Fragment: REACT_FRAGMENT_TYPE,
  StrictMode: REACT_STRICT_MODE_TYPE,
  Suspense: REACT_SUSPENSE_TYPE,
*/

/**
config：寫在jsx標籤上的全部的attrs，以key-value形式存儲

須要在config對象中篩選出咱們認爲是真正props內容以及特殊的key，ref屬性
*/

/** 
children：標籤中間放置的一些內容
*/

/** 從源碼能夠看出雖然建立的時候都是經過config傳入的，
可是key和ref不會跟其餘config中的變量一塊兒被處理，
而是單獨做爲變量出如今ReactElement上。
*/

// 源碼 ReactElement.js
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,
  };

  return element
}

/**
$$typeof: 用來標識咱們的Element是什麼類型的

好比咱們在寫jsx代碼的時候，全部的節點都是經過createElement建立的，那麼它的$$typeof就永遠是REACT_ELEMENT_TYPE，這點須要咱們去記住。

由於，$$typeof在後續咱們真正進行一個應用更新的時候，它如何渲染到dom的過程中，它是常常要被用到的，它是用來一個判斷的

你們可能會問了，咱們寫react應用的時候，大部分時間都是在寫jsx，那麼是否是全部的節點都是$$typeof？

也存在一些特殊狀況，特殊狀況和平臺有關。在react-dom中，有個api叫React.createPortal，它返回的對象和上述相似，只不過它的$$typeof是REACT_PORTAL_TYPE
*/

/**
type: 記錄節點類型，是原生組件仍是class function Component or other
*/

小結：

ReactElement只是一個用來承載信息的容器，他會告訴後續的操做這個節點的如下信息：

type類型，用於判斷如何建立節點
key和ref這些特殊信息
props新的屬性內容
$$typeof用於肯定是否屬於ReactElement
這些信息對於後期構建應用的樹結構是很是重要的，而React經過提供這種類型的數據，來脫離平臺的限制