本小書大部分內(nèi)容來自作者 Jokcy 的 《React 源碼解析》: https://react.jokcy.me/
本文已同步在我的博客: http://ruizhengyun.cn/blog/post/f5de7c02.html
感謝 Jokcy 讓我深度了解 React戒努。如他所說蚊丐，在決定閱讀 React 源碼時(shí)認(rèn)為不會(huì)是一件很難的事，但是真正開始閱讀之后才發(fā)現(xiàn)瞬场，事情沒那么簡單，因?yàn)樾枰銐虻哪托摹⒛軌颡?dú)立思考和靜下心來（因?yàn)槟銜?huì)碰到之前編碼沒有見過的寫法和概念等等）。
ReactElement.js 整體部分
// 保留的 props
const RESERVED_PROPS = {
key: true,
ref: true,
__self: true,
__source: true,
};
const ReactElement = function(type, key, ref, self, source, owner, props) {
const element = {
// 此標(biāo)記允許我們將其唯一標(biāo)識(shí)為React元素
$$typeof: REACT_ELEMENT_TYPE,
// 屬于元素的內(nèi)置屬性
type: type,
key: key,
ref: ref,
props: props,
// 記錄負(fù)責(zé)創(chuàng)建此元素的組件牲览。
_owner: owner,
};
if (__DEV__) {/*...*/}
return element;
}
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];
}
}
}
const childrenLength = arguments.length - 2;
if( childrenLength === 1) {
props.children = children;
} else {
const childArray = Array(childrenLength);
for (let i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
if (__DEV__) { /*...*/ }
props.children = childArray;
}
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props
);
}
分析 createElement 函數(shù)
function createElement(type, config, children) {}
- 該函數(shù)接收 3 個(gè)參數(shù)，分別是
type, config, children桑驱； - 調(diào)用
ReactElement竭恬，ReactElement內(nèi)部返回一個(gè)對(duì)象element；
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;
// 剩余的屬性將添加到新的 props 對(duì)象中
for (propName in config) {
if(hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
props[propName] = config[propName];
}
}
}
這段代碼做了
- 對(duì)
ref和key做了驗(yàn)證（對(duì)于這種校驗(yàn)方法無需內(nèi)部實(shí)現(xiàn)熬的，保持干凈痊硕，也便于閱讀）； - 遍歷
config把內(nèi)建的幾個(gè)屬性（剔除原型鏈上的屬性和規(guī)定要剔除的屬性）丟到props中去押框；
children 邏輯
const childrenLength = arguments.length - 2;
if( childrenLength === 1) {
props.children = children;
} else {
const childArray = Array(childrenLength);
for (let i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
if (__DEV__) { /*...*/ }
props.children = childArray;
}
第一行可以看出岔绸，取出第二個(gè)參數(shù)后的參數(shù)，然后判斷長度是否 > 1:
-
> 1就代表有多個(gè)children橡伞，這個(gè)時(shí)候props.children會(huì)是一個(gè)數(shù)組盒揉， 所以后面在對(duì)props.children進(jìn)行遍歷的時(shí)候需要注意它是否是數(shù)組，當(dāng)然你也可以利用React.Children中的 API兑徘，下文中也會(huì)對(duì)React.Children中的 API 進(jìn)行講解刚盈； -
=== 1就是一個(gè)對(duì)象；
返回值
const ReactElement = function(type, key, ref, self, source, owner, props) {
const element = {
// 此標(biāo)記允許我們將其唯一標(biāo)識(shí)為React元素
$$type: REACT_ELEMENT_TYPE,
// 屬于元素的內(nèi)置屬性
type: type,
key: key,
ref: ref,
props: props,
// 記錄負(fù)責(zé)創(chuàng)建此元素的組件挂脑。
_owner: owner,
};
if (__DEV__) {/*...*/}
return element;
}
核心就是通過 $$type 來識(shí)別這是個(gè) ReactElement藕漱，后會(huì)看到很多類似的類型欲侮。
注意：通過 JSX 寫的
<APP />代表ReactElement，APP代表 React Component (組件)肋联。
這章節(jié)的內(nèi)容可以繪制成的流程
createElement 流程
