總覽:
你將會明白:
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,
});
不能將一個react元素的ref通過props傳遞給其他組件。