React的React.createElement源码解析(一)

集思以广益 發表於 2020-1-17 13:58:00

<h1 class="postTitle">一.什么是jsx </h1>
<div id="cnblogs_post_body" class="blogpost-body ">
jsx是语法糖  它是js和html的组合使用
 为什么用jsx语法？
 高效定义模版，通过babel编译后使用不会带来性能问题
二.jsx语法转化为js语法 
  jsx语法通过babel转化为js语法内部调用了React.createElement()方法 
  html标签
   <img src="https://img2018.cnblogs.com/common/1853661/202001/1853661-20200110202737069-1831215256.png">
自定义组件
<img src="https://img2018.cnblogs.com/common/1853661/202001/1853661-20200113224114923-2028308476.png">
 React.Fragment组件
<img src="https://img2018.cnblogs.com/common/1853661/202001/1853661-20200117102837870-1519722483.png">
 
React.createElement(标签,属性props对象,子节点1,子节点2.....) 
1.参数：标签名,属性对象,子节点   返回值：虚拟dom对象
2.标签：1.字符串 2.组件（自定义组件：函数组件/class组件，react原生组件：React.Fragment等） 
　　　　一般组件首字母大写如果bable转化时发现当前标签的首字母为大写则表示当前的标签是一个函数名称否则当前标签为一个字符串
3.属性props对象：写在标签上的属性集合一般为对象
4.子节点：表示子节点的集合一般从React.createElement的第三个参数开始，如果对于当前标签的子节点为字符串则参数值直接为字符串 
              如果当前节点的子节点不是字符串则会生成新的React.createElement
如：<ul><li>我是li的子节点</li></ul>  1.ul而言子节点：li  2.li而言子节点我是li的子节点
虚拟dom：
<img src="https://img2018.cnblogs.com/common/1853661/202001/1853661-20200110203642020-159494364.png">
 调用createElement函数返回ReactElement：该标签名放到type上该标签的属性和该标签的子节点放到与该标签同级的props上
 
三.React.createElement(type,config[...children])源码分析
作用：根据指定的第一个参数创建一个react元素
源码解析：//type：节点名称(函数/字符串) config：节点名称属性（对象） children：节点名称的子节点（字符串/新的React.createElement
<div class="cnblogs_code">
<pre></pre>
<pre></pre>
<pre>function createElement(type, config, children) { var propName;
 //提取保留名称
 var props = {};

 var key = null;
 var ref = null;
 var self = null;
 var source = null;
 //标签的属性不为空时说明标签有属性值特殊处理：把key和ref赋值给单独的变量
 if (config != null) {
 //有合理的ref
 if (hasValidRef(config)) {
 ref = config.ref;
 }
 //有合理的key 
 if (hasValidKey(config)) {
 key = '' + config.key;
 }

 self = config.__self === undefined ? null : config.__self;
 source = config.__source === undefined ? null : config.__source;

 //config中剩余属性,且不是原生属性(RESERVED_PROPS对象的属性)，则添加到新props对象中
 for (propName in config) {
 if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
 props = config; //config去除key/ref 其他属性的放到props对象中
 }
 }
 }
 // Children can be more than one argument, and those are transferred onto
 // the newly allocated props object.
 //子元素数量（第三个参数以及之后参数都是子元素兄弟节点）
 var childrenLength = arguments.length - 2;

 if (childrenLength === 1) {
 props.children = children;
 } else if (childrenLength > 1) {
 var childArray = Array(childrenLength); //声明一个数组
 //依次将children push到数组中
 for (var i = 0; i < childrenLength; i++) {
 childArray = arguments;
 }

 {
 //冻结array 返回原来的childArray且不能被修改防止有人修改库的核心对象冻结对象大大提高性能
 if (Object.freeze) {
 Object.freeze(childArray);
 }
 }
 props.children = childArray; //父组件内部通过this.props.children获取子组件的值
 }

 //为子组件设置默认值一般针对的是组件 //class com extends React.component 则com.defaultProps获取当前组件自己的静态方法 
 if (type && type.defaultProps) { //如果当前组件中有默认的defaultProps则把当前组件的默认内容定义到defaultProps中
 var defaultProps = type.defaultProps;

 for (propName in defaultProps) {
 if (props === undefined) { //如果父组件中对应的值为undefinde 则把默认值赋值赋值给props当作props的属性
 props = defaultProps;
 }
 }
 }

 {
 //一旦ref或者key存在
 if (key || ref) {
 //如果type是组件的话
 var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
 if (key) {
 defineKeyPropWarningGetter(props, displayName);
 }

 if (ref) {
 defineRefPropWarningGetter(props, displayName);
 }
 }
 }

 //props：1.config的属性值 2.children的属性（字符串/数组）3.default的属性值
 return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
}</pre>
</div>
  部分代码解析：
  (1) Object.prototype.hasOwnProperty()   
<div class="cnblogs_code">
<pre>//判断某一个属性是否在实例对象本身上,而不是在原型上返回值：布尔值
let obj = { a: 1 };
obj.hasOwnProperty("a") //true
obj.hasOwnProperty("toString")//false</pre>
</div>
<div>
<div> (2) Object.getOwnPropertyDescriptor(obj, props)</div>
<div>      Object.getOwnPropertyDescriptors(obj)</div>
<div>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="https://common.cnblogs.com/images/copycode.gif"></div>
<pre>let obj = {
foo: 123,
get bar() { return '123' }
};
//返回对象指定某一个属性的描述对象
Object.getOwnPropertyDescriptor(obj, 'bar')
//返回对象所有属性的描述对象
Object.getOwnPropertyDescriptors(obj)</pre>
<div class="cnblogs_code_toolbar"><img src="https://common.cnblogs.com/images/copycode.gif"></div>
</div>
返回值
<img src="https://img2018.cnblogs.com/common/1853661/202001/1853661-20200115170452712-1076452457.png">
</div>
</div>
<div>
<div>2.hasValidKey</div>
<div>作用：是否设置了key属性</div>
<div>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="https://common.cnblogs.com/images/copycode.gif"></div>
<pre> function hasValidKey(config) {
 {
 if (hasOwnProperty.call(config, 'key')) {
 var getter = Object.getOwnPropertyDescriptor(config, 'key').get;

 if (getter && getter.isReactWarning) {
 return false;
 }
 }
 }

 return config.key !== undefined;
}</pre>
<div class="cnblogs_code_toolbar"><img src="https://common.cnblogs.com/images/copycode.gif"></div>
</div>
四，ReactElement源码分析
作用：返回一个虚拟dom对象
 源码：
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="https://common.cnblogs.com/images/copycode.gif"></div>
<pre> var ReactElement = function (type, key, ref, self, source, owner, props) {
 var element = {
 //因为react最终渲染dom时候，确保是react.createElement类型需要判断$$typeof===REACT_ELEMENT_TYPE
 $$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
 };

 {
 // The validation flag is currently mutative. We put it on
 // an external backing store so that we can freeze the whole object.
 // This can be replaced with a WeakMap once they are implemented in
 // commonly used development environments.
 //WeakMap
 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) {
 //代码性能优化：将element的一些属性配置为不可配置提高性能
 Object.freeze(element.props);
 Object.freeze(element);
 }
 }

 return element;//返回虚拟dom对象
};</pre>
<div class="cnblogs_code_toolbar"><img src="https://common.cnblogs.com/images/copycode.gif"></div>
</div>
<pre> </pre>
</div>
</div>
</div>
<pre>节点名称</pre> 
来源：https://www.cnblogs.com/sunxiaopei/p/12205447.html

頁: [1]

琼殿技术论坛's Archiver

React的React.createElement源码解析(一)