react相關庫源碼淺析html
react ts3 項目react
你將會明白:
react元素的key和ref爲何不會存在props上,而且傳遞,開發環境下與生產環境下處理key和ref的區別?
...git
內部方法github
│ ├── hasValidRef ----------------------------- 檢測獲取config上的ref是否合法 │ ├── hasValidKey ----------------------------- 檢測獲取config上的key是否合法 │ ├── defineKeyPropWarningGetter ----- 鎖定props.key的值使得沒法獲取props.key │ ├── defineRefPropWarningGetter ----- 鎖定props.ref的值使得沒法獲取props.ref │ ├── ReactElement ------------ 被createElement函數調用,根據環境設置對應的屬性
向外暴露的函數api
│ ├── createElement ---------------------------- 生成react元素,對其props改造 │ ├── createFactory -------------------------------------- react元素工廠函數 │ ├── cloneAndReplaceKey ---------------------------- 克隆react元素,替換key │ ├── cloneElement ----------------------------- 克隆react元素,對其props改造 │ ├── isValidElement ---------------------------------判斷元素是不是react元素
經過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; }
經過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; }
開發模式下,該函數在creatElement函數中可能被調用。鎖定props.key的值使得沒法獲取props.key,標記獲取props中的key值是不合法的,當使用props.key的時候,會執行warnAboutAccessingKey函數,進行報錯,從而獲取不到key屬性的值。dom
即以下調用始終返回undefined:ide
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, }); }
邏輯與defineKeyPropWarningGetter一致,鎖定props.ref的值使得沒法獲取props.ref,標記獲取props中的ref值是不合法的,當使用props.ref的時候,會執行warnAboutAccessingKey函數,進行報錯,從而獲取不到ref屬性的值。
即以下調用始終返回undefined:
props.ref
被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; };
在開發模式和生產模式下,第二參數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:將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覆蓋掉。
以下:
//建立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
由下面源碼也可知道:
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, ); }
返回一個函數,該函數生成給定類型的 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; }
克隆一箇舊的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; }
判斷一個對象是不是合法的react元素,即判斷其$$typeof屬性是否爲REACT_ELEMENT_TYPE
export function isValidElement(object) { return ( typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE ); }
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傳遞給其餘組件。