jsx 相关知识

·  阅读 248

JSX介绍

在React17之前,React是通过jsx描述视图,通过babel-loader转译后变成React.createElement(****) 形式,该函数生成vmode来描述真实dom。将来如果状态发生变化,vdom做出相应的变化,再通过diff算法对比新老vdom 从而做出最终的dom操作。

所以在React17之前 使用了jsx都需要引入react。 因为createElement函数来自React。

 import React from 'react';    
复制代码

在React17中JSX改版了 介绍全新的 JSX 转换 , 并在 React 的 package 中引入了两个新入口,这些入口只会被 Babel 和 TypeScript 等编译器使用。新的 JSX 转换不会将 JSX 转换为 React.createElement,而是自动从 React 的 package 中引入新的入口函数并调用。

JSX返回的结构

const vdom={
  key,
  ref,
  type,
  typeof,
  props:{children,className}
}
复制代码

vdom是通过props的children 形成vdom树 。

createElement 和 cloneElement

createElement 和 cloneElement 都是返回ReactElement。他们的区别是cloneElement会将props合并。接来来我们从源码中获取createElement 和 cloneElement的不同之处。
复制代码
  • createElement

createElement 将 config属性映射到props属性上。 处理props 的children属性。

```js
 function createElement(type, config, children) {

    var props = {};
    var key = null;
    var ref = null;
    var self = null;
    var source = null;

    //将config的属性赋值给 props
      if (config != null) {
      }

    //去掉 type 和config 剩余的当 children处理
    var childrenLength = arguments.length - 2; 
    props.children = childArray;

   return ReactElement(type, key, ref, self, source, 			ReactCurrentOwner.current, props);

 }

 //处理的key和ref  就是在props上添加key和ref属性--监听get 
 Object.defineProperty(props, 'key', {
      get: warnAboutAccessingKey,
      configurable: true
    });

     Object.defineProperty(props, 'ref', {
      get: warnAboutAccessingRef,
      configurable: true
    });

 ```
复制代码
  • cloneElement (一些属性值的初始值 来自element,比如 props /key /self)
 function cloneElement(element, config, children) {
  var props = assign({}, element.props); // Reserved names are extracted
  var props = assign({}, element.props); // Reserved names are extracted


   var key = element.key;
   var ref = element.ref; 
   var self = element._self;
   var source = element._source; 
   var owner = element._owner;
   
 
 //处理 config属性 映射到 props属性上   
 if (config != null) {
 
 }
 
 //和createElement 一样
  var childrenLength = arguments.length - 2;
  props.children = childArray;
  
  return ReactElement(element.type, key, ref, self, source, owner, props);  
}

复制代码
  • ReactElement 返回element 其实就是js对象 ,这个js对象就是vdom , props通过children属性形成 树状图。
  var ReactElement = function (type, key, ref, self, source, owner, props) {
    var element = {    
      $$typeof: REACT_ELEMENT_TYPE,
      type: type,
      key: key,
      ref: ref,
      props: props,    
      _owner: owner
    };

    {
     
      element._store = {}; 
     
      Object.defineProperty(element._store, 'validated', {
        configurable: false,
        enumerable: false,
        writable: true,
        value: false
      }); 

      Object.defineProperty(element, '_self', {
        configurable: false,
        enumerable: false,
        writable: false,
        value: self
      });

      Object.defineProperty(element, '_source', {
        configurable: false,
        enumerable: false,
        writable: false,
        value: source
      });

      if (Object.freeze) {
        Object.freeze(element.props);
        Object.freeze(element);
      }
    }

    return element;
  };
复制代码
  • elemen的type类型

    1. classComponent //isReactComponent 标识 类组件 React.prototype.isReactComponent={};
    Component.prototype.setState
    复制代码
    Component.prototype.forceUpdate 
    复制代码

    2. PureComponent

      ```js
        ComponentDummy.prototype = Component.prototype;      
        var pureComponentPrototype = 
        PureComponent.prototype = new ComponentDummy();
        pureComponentPrototype.constructor = PureComponent; 
        assign(pureComponentPrototype, Component.prototype);
    
       //isPureReactComponent 为true 标识 为PureComponent
       pureComponentPrototype.isPureReactComponent=true;
     ```
     -----   
      * PureComponent 继承 Component
      * isPureReactComponent 为true 标识 为PureComponent
      * 进行props 和 state 浅比较 通过Object.is()进行比较 (源码 --	checkShouldComponentUpdate 函数)
    
    
          ```js
            if (ctor.prototype && ctor.prototype.isPureReactComponent) {
              return !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState);
    
              function shallowEqual(objA, objB) {
                  if (objectIs(objA, objB)) {
                    return true;
                  }
    
                  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
                    return false;
                  }
    
                  var keysA = Object.keys(objA);
                  var keysB = Object.keys(objB);
    
                  if (keysA.length !== keysB.length) {
                    return false;
                  } 
    
                  for (var i = 0; i < keysA.length; i++) {
                    if (!hasOwnProperty$2.call(objB, keysA[i]) || !objectIs(objA[keysA[i]], objB[keysA[i]])) {
                      return false;
                    }
                  }
                  return true;
                }
    
          ```
             
     
          
     3.  Html 原生标签      
     4. 文本
     5. Fragment
     
    复制代码
  • createElement和cloneElement的小结:

    1. createElement和cloneElement都是返回 element。就是vdom结构。

    2. cloneElement其实就是对element(第一个参数)的扩展。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改