总览：
你将会邃晓：
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通报给其他组件。
