react原始碼淺析(三)：ReactElement
總覽：
你將會明白：
react元素的key和ref為什麼不會存在props上，並且傳遞，開發環境下與生產環境下處理key和ref的區別？
...
內部方法
│├── hasValidRef ----------------------------- 檢測獲取config上的ref是否合法 │├── hasValidKey ----------------------------- 檢測獲取config上的key是否合法 │├── defineKeyPropWarningGetter ----- 鎖定props.key的值使得無法獲取props.key │├── defineRefPropWarningGetter ----- 鎖定props.ref的值使得無法獲取props.ref │├── ReactElement ------------ 被createElement函式呼叫，根據環境設定對應的屬性
向外暴露的函式
│├── createElement ---------------------------- 生成react元素，對其props改造 │├── createFactory -------------------------------------- react元素工廠函式 │├── cloneAndReplaceKey ---------------------------- 克隆react元素，替換key │├── cloneElement ----------------------------- 克隆react元素，對其props改造 │├── isValidElement ---------------------------------判斷元素是否是react元素
hasValidRef
通過Ref屬性的取值器物件的isReactWarning屬性檢測是否含有合法的Ref，在開發環境下，如果這個props是react元素的props那麼獲取上面的ref就是不合法的，因為在creatElement的時候已經呼叫了defineRefPropWarningGetter。生產環境下如果config.ref !== undefined，說明合法。
function hasValidRef(config) {
//在開發模式下
if (__DEV__) {
//config呼叫Object.prototype.hasOwnProperty方法檢視其物件自身是否含有'ref'屬性
if (hasOwnProperty.call(config, 'ref')) {
//獲取‘ref’屬性的描述物件的取值器
const getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
//如果取值器存在，並且取值器上的isReactWarning為true，就說明有錯誤，返回false，ref不合法
if (getter && getter.isReactWarning) {
return false;
}
}
}
//在生產環境下如果config.ref !== undefined，說明合法;
return config.ref !== undefined;
}
hasValidKey
通過key屬性的取值器物件的isReactWarning屬性檢測是否含有合法的key，也就是如果這個props是react元素的props那麼上面的key就是不合法的，因為在creatElement的時候已經呼叫了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;
}
defineKeyPropWarningGetter
開發模式下，該函式在creatElement函式中可能被呼叫。鎖定props.key的值使得無法獲取props.key,標記獲取props中的key值是不合法的，當使用props.key的時候，會執行warnAboutAccessingKey函式，進行報錯，從而獲取不到key屬性的值。
即如下呼叫始終返回undefined:
props.key
給props物件定義key屬性，以及key屬性的取值器為warnAboutAccessingKey物件
該物件上存在一個isReactWarning為true的標誌，在hasValidKey上就是通過isReactWarning來判斷獲取key是否合法
specialPropKeyWarningShown用於標記key不合法的錯誤資訊是否已經顯示，初始值為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,
});
}
defineRefPropWarningGetter
邏輯與defineKeyPropWarningGetter一致，鎖定props.ref的值使得無法獲取props.ref,標記獲取props中的ref值是不合法的，當使用props.ref的時候，會執行warnAboutAccessingKey函式，進行報錯，從而獲取不到ref屬性的值。
即如下呼叫始終返回undefined:
props.ref
ReactElement
被createElement函式呼叫，根據環境設定對應的屬性。
程式碼效能優化：為提高測試環境下，element比較速度，將element的一些屬性配置為不可數，for...in還是Object.keys都無法獲取這些屬性，提高了速度。
開發環境比生產環境多了_store，_self，_source屬性，並且props以及element被凍結，無法修改配置。
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;
};
createElement
在開發模式和生產模式下，第二引數props中的ref與key屬性不會傳入新react元素的props上，所以開發模式和生產模式都無法通過props傳遞ref與key。生產模式下ref與key不為undefined就賦值給新react元素對應的ref與key屬性上，開發模式下獲取ref與key是合法的（第二引數不是某個react元素的props，其key與ref則為合法），則賦值給新react元素對應的ref與key屬性上。
使用 JSX 編寫的程式碼將被轉成使用 React.createElement()
React.createElement API：
React.createElement( type, [props], [...children] )
type(型別) 引數：可以是一個標籤名字字串（例如 'div' 或'span'），或者是一個 React 元件 型別（一個類或者是函式），或者一個 React fragment 型別。
僅在開發模式下獲取props中的ref與key會丟擲錯誤
props：將key，ref，__self，__source的屬性分別複製到新react元素的key，ref，__self，__source上，其他的屬性值，assign到type上的props上。 當這個props是react元素的props，那麼其ref與key是無法傳入新元素上的ref與key。只有這個props是一個新物件的時候才是有效的。這裡就切斷了ref與key通過props的傳遞。
children：當children存在的時候，createElement返回的元件的props中不會存在children，如果存在的時候，返回的元件的props.children會被傳入的children覆蓋掉。
引數中的children覆蓋順序
如下：
//建立Footer
class Footer extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div>
this is Footer {this.props.children}
</div>
)
}
}
//建立FooterEnhance
const FooterEnhance = React.createElement(Footer, null ,"0000000");
//使用Footer與FooterEnhance
<div>
<Footer>aaaaa</Footer>
{FooterEnhance}
</div>
結果：
this is Footer aaaaa this is Footer 0000000
可以看到：
第三個引數children覆蓋掉原來的children:aaaaa
由下面原始碼也可知道：
- 第三個引數children也可以覆蓋第二引數中的children，測試很簡單。
- 第二個引數props中的children會覆蓋掉原來元件中的props.children
返回值的使用：如{FooterEnhance}。不能當做普通元件使用。
原始碼
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上沒有的屬性，新增到props上
//將config上合法的ref與key儲存到內部變數ref和key
if (config != null) {
//判斷config是否具有合法的ref與key，有就儲存到內部變數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.
//如果只有三個引數，將第三個引數直接覆蓋到props.children上
//如果不止三個引數，將後面的引數組成一個數組，覆蓋到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
//如果有預設的props值，那麼將props上為undefined的屬性設定初始值
if (type && type.defaultProps) {
const defaultProps = type.defaultProps;
for (propName in defaultProps) {
if (props[propName] === undefined) {
props[propName] = defaultProps[propName];
}
}
}
//開發環境下
if (__DEV__) {
//需要利用defineKeyPropWarningGetter與defineRefPropWarningGetter標記新元件上的props也就是這裡的props上的ref與key在獲取其值得時候是不合法的。
if (key || ref) {
//type如果是個函式說明不是原生的dom標籤，可能是一個元件，那麼可以取
const displayName =
typeof type === 'function'
? type.displayName || type.name || 'Unknown'
: type;
if (key) {
//在開發環境下標記獲取新元件的props.key是不合法的,獲取不到值
defineKeyPropWarningGetter(props, displayName);
}
if (ref) {
//在開發環境下標記獲取新元件的props.ref是不合法的,獲取不到值
defineRefPropWarningGetter(props, displayName);
}
}
}
//注意生產環境下的ref和key還是被賦值到元件上
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props,
);
}
createFactory
返回一個函式，該函式生成給定型別的 React 元素。
用於將在字串或者函式或者類轉換成一個react元素，該元素的type為字串或者函式或者類的建構函式
例如：Footer為文章的類元件
console.log(React.createFactory('div')())
console.log(React.createFactory(Footer)())
返回的結果分別為：
$$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;
}
cloneAndReplaceKey
克隆一箇舊的react元素，得到的新的react元素被設定了新的key
export function cloneAndReplaceKey(oldElement, newKey) {
const newElement = ReactElement(
oldElement.type,
newKey,
oldElement.ref,
oldElement._self,
oldElement._source,
oldElement._owner,
oldElement.props,
);
return newElement;
}
isValidElement
判斷一個物件是否是合法的react元素，即判斷其$$typeof屬性是否為REACT_ELEMENT_TYPE
export function isValidElement(object) {
return (
typeof object === 'object' &&
object !== null &&
object.$$typeof === REACT_ELEMENT_TYPE
);
}
cloneElement
React.cloneElement( element, [props], [...children] )
使用 element 作為起點，克隆並返回一個新的 React 元素。 所產生的元素的props由原始元素的 props被新的 props 淺層合併而來，並且最終合併後的props的屬性為undefined，就用element.type.defaultProps也就是預設props值進行設定。如果props不是react元素的props，呢麼props中的key 和 ref 將被存放在返回的新元素的key與ref上。
返回的元素相當於：
<element.type {...element.props} {...props}>{children}</element.type>
其原始碼與createElement類似，不同的地方是在開發環境下cloneElement不會對props呼叫defineKeyPropWarningGetter與defineRefPropWarningGetter對props.ref與props.key進行獲取攔截。
總結
react元素的key和ref為什麼不會在props上，並且傳遞，開發環境下與生產環境下處理key和ref的區別？
creatElement函式中阻止ref、key等屬性賦值給props，所以react元素的key和ref不會在props上，並且在元件間通過props傳遞
for (propName in config) {
if (
hasOwnProperty.call(config, propName) &&
!RESERVED_PROPS.hasOwnProperty(propName)
) {
props[propName] = config[propName];
}
}
開發環境下與生產環境下處理key和ref的區別：開發環境下還會呼叫defineRefPropWarningGetter與defineKeyPropWarningGetter，利用Object.defineProperty進行攔截報錯：
Object.defineProperty(props, 'key', {
get: warnAboutAccessingKey,
configurable: true,
});