在上一節我們看到了jsx程式碼轉化成了javascript程式碼之後，我們的寫的類似html的那種標籤形式，然後標籤的屬性和內容最終都會變成型別引數傳到我們呼叫的React.createElement(type, config, children)方法中。
首先我們看下creatElement方法的原始碼，如下：
/**
* Create and return a new ReactElement of the given type.
* See https://reactjs.org/docs/react-api.html#createelement
*/
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;
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;
// Remaining properties are added to a new props object
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.
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
if (type && type.defaultProps) {
const defaultProps = type.defaultProps;
for (propName in defaultProps) {
if (props[propName] === undefined) {
props[propName] = defaultProps[propName];
}
}
}
if (__DEV__) {
if (key || ref) {
const displayName = typeof type === 'function'
? type.displayName || type.name || 'Unknown'
: type;
if (key) {
defineKeyPropWarningGetter(props, displayName);
}
if (ref) {
defineRefPropWarningGetter(props, displayName);
}
}
}
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props,
);
}複製程式碼從原始碼我們可以看到，該方法接受三個引數：
- type
- config
- children
type 指代這個ReactElement的型別
- 標籤類的字串，div, p等等
- 元件類，Class型別是我們繼承自 Component 或者 PureComponent 的元件或者函式型別的Function Component
- React原生提供的
Fragment、AsyncMode等是Symbol，會被特殊處理
config 指代元素節點上attr的屬性，但是從原始碼裡可以看出有兩個屬性會被特殊處理，就是ref和key，首先它會檢查是否有合法的ref和key，然後把它讀取到單獨的變數中儲存，最終傳給ReactElement, 然後剩下的屬性會被儲存到props變數當中
我們可以看到defaultProps是如何處理的，首先遍歷defaultProps，然後檢視props物件中該鍵是否有值，如果（props[propName] === undefined），就把該鍵的值設為defaultProps改建的值（props[propName] = defaultProps[propName]） ，但是我們可以看到它只是判斷了是否為undefined ,說明設為null是可以的。
createElement方法最後返回一個ReactElement方法的呼叫，那麼ReactElement到底是什麼，我們來看下它的原始碼：
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__) {
// The validation flag is currently mutative. We put it on
// an external backing store so that we can freeze the whole object.
// This can be replaced with a WeakMap once they are implemented in
// commonly used development environments.
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;
};複製程式碼從上面的原始碼中我們可以看到方法內部首先宣告瞭一個element物件，並且把type, ref, key, props等屬性儲存在物件裡然後返回element。
但是我們還看到element物件上有個$$typeof ，這是個什麼東西，我們可以看到它的值是一個常量（REACT_ELEMENT_TYPE），但有一個特例：ReactDOM.createPortal的時候是REACT_PORTAL_TYPE，不過他不是通過createElement建立的，所以他應該也不屬於ReactElement ，所以$$typeof是ReactElement用於確定是否屬於ReactElement 。
ReactElement是用來承載資訊的容器，他會告訴我們後續操作這個節點的以下資訊：
type型別，用於判斷如何建立節點key和ref這些特殊資訊props新的屬性內容$$typeof用於確定是否屬於ReactElement