当前位置: 首页 > Web前端 > HTML5

React源码阅读-13_044

时间:2023-04-05 21:59:14 HTML5

React源码阅读-13ReactElementFunctionObject.getOwnPropertyDescriptor()方法返回指定对象上一个自身属性对应的属性描述符Object.defineProperty()方法会直接在一个对象上定义一个新的属性,或修改对象的现有属性并返回此对象。hasValidRef判断是没有有效的reffunction如果(getter&&getter.isReactWarning){返回假;}}}returnconfig.ref!==undefined;}hasValidKey判断是否有效的KeyfunctionhasValidKey(config){if(__DEV__){if(hasOwnProperty.call(config,'key')){constgetter=Object.getOwnPropertyDescriptor(config,'key').get;如果(getter&&getter.isReactWarning){返回假;}}}returnconfig.key!==undefined;}https://developer.mozilla.org...defineKeyPropWarningGetterfunctiondefineKeyPropWarningGetter(props,displayName){constwarnAboutAccessingKey=function(){if(!specialPropKeyWarningShown){specialPropKeyWarningShown=true;warningWithoutStack(false,'%s:`key`不是道具。尝试访问它会导致'+'在`undefined`中被返回。如果您需要在子组件中访问相同的'+'值,您应该将其作为不同的'+'属性传递。(https://fb.me/react-special-props)',displayName,);}};warnAboutAccessingKey.isReactWarning=true;Object.defineProperty(props,'key',{get:warnAboutAccessingKey,configurable:true,});}defineRefPropWarningGetterfunctiondefineRefPropWarningGetter(props,displayName){constwarnAboutAccessingRef=function(){如果(!specialPropRefWarningShown){specialPropRefWarningShown=true;warningWithoutStack(false,'%s:`ref`不是prop。尝试访问它会导致返回`undefined`中的'+'。如果您需要访问子组件中相同的'+'值,您应该将其作为不同的'+'prop传递。(https://fb.me/react-special-props)',displayName,);}};warnAboutAccessingRef.isReactWarning=true;Object.defineProperty(props,'ref',{get:warnAboutAccessingRef,configurable:true,});}ReactElementconstReactElement=function(type,key,ref,self,source,owner,props){constelement={//这个标签允许我们唯一地将它标识为React元素$$typeof:REACT_ELEMENT_TYPE,//属于元素类型的内置属性:type,key:key,ref:ref,props:props,//记录组件负责创建这个元素_owner:owner,};if(__DEV__){//验证标志当前是可变的。我们放在//外部后备存储上,以便我们可以冻结整个对象。//可以在WeakMap中实现后,替换为WeakMap//通用开发环境。元素._store={};//为了更容易比较ReactElements以进行测试,我们使//验证标志不可枚举(如果可能,应该//包括我们运行测试的所有环境),因此测试框架//忽略它。Object.defineProperty(element._store,'validated',{configurable:false,enumerable:false,writable:true,value:false,});//self和source是DEV-only属性。Object.defineProperty(element,'_self',{configurable:false,enumerable:false,writable:false,value:self,});//在两个不同的地方创建的两个元素应该被认为//出于测试目的是相等的,所以我们将它从枚举中隐藏起来。Object.defineProperty(element,'_source',{configurable:false,enumerable:false,writable:false,value:source,});如果(Object.freeze){Object.freeze(element.props);Object.freeze(元素);}}returnelement;};exportfunctionjsxexportfunctionjsx(type,config,maybeKey){让propName;//提取保留名称constprops={};让键=空;让ref=null;//current,键可以作为道具传播。这会导致潜在的问题//如果key也被显式声明(即//或)。我们正在弃用键值传递,//但作为中间步骤,我们将对所有内容使用jsxDEV//因为我们目前无法确定if//键已明确声明为未定义。if(maybeKey!==undefined){key=''+maybeKey;}if(hasValidKey(config)){key=''+config.key;}if(hasValidRef(config)){ref=config.ref;}//剩余的属性被添加到一个新的道具对象中for(propNameinconfig){if(hasOwnProperty.call(config,propName)&&!RESERVED_PROPS.hasOwnProperty(propName)){props[propName]=config[propName];}}//解析默认属性if(type&&type.defaultProps){constdefaultProps=type.defaultProps;for(propNameindefaultProps){if(props[propName]===undefined){props[propName]=defaultProps[propName];}}}returnReactElement(type,key,ref,undefined,undefined,ReactCurrentOwner.current,props,);}jsxDev的行为和jsx几乎一样,主要是defineKeyPropWarningGetter和defineRefPropWarningGetter的处理。createElement创建并返回指定类型的新React元素。导出函数createElement(type,config,children){letpropName;//提取保留名称constprops={};让键=空;让ref=null;让自己=空;让源=空;if(config!=null){if(hasValidRef(config)){ref=config.ref;}if(hasValidKey(config)){key=''+config.key;}self=config.__self===未定义?空:config.__self;来源=config.__来源===未定义?空:配置.__源;//剩余的属性被添加到一个新的道具对象中for(propNameinconfig){if(hasOwnProperty.call(config,propName)&&!RESERVED_PROPS.hasOwnProperty(propName)){props[propName]=config[propName];}}}//Children可以有多个参数,这些参数会被转移到//新分配的props对象上。constchildrenLength=arguments.length-2;if(childrenLength===1){props.children=children;}elseif(childrenLength>1){constchildArray=Array(childrenLength);for(leti=0;i.type===Foo`。//它不应该命名为“constructor”,因为它可能不是//创建元素的函数,甚至可能不是构造函数。//旧钩子:删除它factory.type=type;returnfactory;}cloneElement使用element元素作为样板克隆并返回一个新的React元素。返回元素的道具是新道具与原始元素道具浅合并的结果。新的子元素将替换现有的子元素,而原始元素的键和引用将被保留。isValidElement验证对象是否为React元素,返回值为true或false。exportfunctionisValidElement(object){//typeofnull=objectreturn(typeofobject==='object'&&object!==null&&object.$$typeof===REACT_ELEMENT_TYPE);}https://zh-hans.reactjs.org/d…

猜你喜欢