React-源码解析-DOM模型

最新推荐文章于 2024-04-13 03:53:51 发布
最新推荐文章于 2024-04-13 03:53:51 发布
阅读量223 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5b2c9324f265da599f68cf8d
版权

JSX解析

1.jsx创建的虚拟元素会被编译成React的createElement方法

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,
  };
  return element;
};

ReactElement.createElement = function(type, config, children) {
  //初始化参数
  var propName;
  var props = {};
  var key = null;
  var ref = null;
  var self = null;
  var source = null;
  //如果存在cinfig就提取里面的内容
  if (config != null) {
    //如果存在ref,key就赋值属性
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = '' + config.key;
    }
    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    //复制config里的内容到props中,除了上面赋值的这些属性
    for (propName in config) {
      if (hasOwnProperty.call(config, propName) &&!RESERVED_PROPS.hasOwnProperty(propName)) {
        props[propName] = config[propName];
      }
    }
  }
  //处理children,全部挂载到props的children属性上,如果只有一个参数,直接赋值给children,否则合并处理
  var childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    var childArray = Array(childrenLength);
    for (var i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    props.children = childArray;//合并成名为childArray的数组
  }
  //如果某个prop为空且存在默认的prop,则将默认prop赋给当前的prop
  if (type && type.defaultProps) {
    var defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  //返回一个ReactElement实例对象
  return ReactElement( type,  key, ref, self, source, ReactCurrentOwner.current, props, );
};
复制代码

2.创建组件

使用React创建组件,会先调用instantiateReactComponent, 这是初始化组件的入口,通过判断参数node的类型来区分创建什么类型的组件

  1. 当node为空时,说明node不存在,则初始化一个空的组件. ReactEmptyComponent.create(instantiateReactComponent)。
  2. 当node类型为对象时,那么就是DOM标签组件或者说是自定义组件, 如果element类型(element = node,element.type='string')为字符串,就会初始化一个dom标签组件:ReactNativeComponent.createInternalComponent(element)， 否则就会初始化一个自定义组件 ReactCompositeComponentWrapper()
  3. 当node类型为字符串或者数字时,则初始化文本组件,ReactNativeComponent.createInstanceForText(node)。
  4. 其余情况不做处理
//初始化组件的入口:已删除不在主线路线的代码
function instantiateReactComponent(node, shouldHaveDebugID) {
  var instance;
  if (node === null || node === false) {
    //node为空的时候创建一个空组件
    instance = ReactEmptyComponent.create(instantiateReactComponent);
  } else if (typeof node === 'object') {
    var element = node;
    // node为object并且element的type为string,创建dom组件
    if (typeof element.type === 'string') {
      instance = ReactHostComponent.createInternalComponent(element);
    } else if (isInternalComponentType(element.type)) {
      //不处理:不是字符串表示的自定义组件暂时无法使用,此处不做组件初始化操作
      instance = new element.type(element);
    } else {
      //创建自定义组件
      instance = new ReactCompositeComponentWrapper(element);
    }
  } else if (typeof node === 'string' || typeof node === 'number') {
    //创建文本组件
    instance = ReactHostComponent.createInstanceForText(node);
  } else {
    //不做处理
  }
  // 这两个字段被DOM和ART扩散算法使用
  instance._mountIndex = 0;
  instance._mountImage = null;
  return instance;
}
复制代码

2.1文本组件

  1. 根据transaction.useCreateElement判断文本是不是通过createElement创建的节点
  2. 是,则为这个节点创建标签和标识domID就可以参与虚拟dom的diff
  3. 如果不是就直接返回文本
var ReactDOMTextComponent = function(text) {
  //保存当前字符串
  this._currentElement = text;
  this._stringText = '' + text;
  //ReactDOMComponentTree时需要的参数
  this._hostNode = null;
  this._hostParent = null;
  //属性
  this._domID = 0;
  this._mountIndex = 0;
  this._closingComment = null;
  this._commentNodes = null;
};

Object.assign(ReactDOMTextComponent.prototype, {
  mountComponent: function(transaction, hostParent, hostContainerInfo, context, ) {
    var domID = hostContainerInfo._idCounter++;
    var openingValue = ' react-text: ' + domID + ' ';
    var closingValue = ' /react-text ';
    this._domID = domID;
    this._hostParent = hostParent;
    //根据transaction.useCreateElement判断文本是否是通过createElement方法创建的节点
    if (transaction.useCreateElement) {
      //如果是createElement创建的节点,为这个节点创建相应的标签和标识domID,这样就跟别的React节点一样,可以参与虚拟dom的diff权利
      var ownerDocument = hostContainerInfo._ownerDocument;
      var openingComment = ownerDocument.createComment(openingValue);
      var closingComment = ownerDocument.createComment(closingValue);
      var lazyTree = DOMLazyTree(ownerDocument.createDocumentFragment());
      //开始标签
      DOMLazyTree.queueChild(lazyTree, DOMLazyTree(openingComment));
      //如果是文本类型,则创建文本节点
      if (this._stringText) {
        DOMLazyTree.queueChild(
          lazyTree,
          DOMLazyTree(ownerDocument.createTextNode(this._stringText)),
        );
      }
      //结束标签
      DOMLazyTree.queueChild(lazyTree, DOMLazyTree(closingComment));
      ReactDOMComponentTree.precacheNode(this, openingComment);
      this._closingComment = closingComment;
      return lazyTree;
    } else {
      //如果不是通过createElemet创建的节点,则直接返回文本
      var escapedText = escapeTextContentForBrowser(this._stringText);//boolean number转为字符串
      //静态页面下直接返回文本
      if (transaction.renderToStaticMarkup) {
        return escapedText;
      }
      //如果不是通过createElement创建的文本,则将标签和属性注释掉,直接返回文本内容
      return ( '<!--' + openingValue + '-->' + escapedText + '<!--' + closingValue + '-->' );
    }
  },

  //更新文本内容
  receiveComponent: function(nextText, transaction) {
    if (nextText !== this._currentElement) {
      this._currentElement = nextText;
      var nextStringText = '' + nextText;
      if (nextStringText !== this._stringText) {
        this._stringText = nextStringText;
        var commentNodes = this.getHostNode();
        //更新文本内容
        DOMChildrenOperations.replaceDelimitedText(
          commentNodes[0],
          commentNodes[1],
          nextStringText,
        );
      }
    }
  },
});
复制代码

2.2 DOM标签组件

  1. 虚拟dom涵盖了原生的DOM标签,使用div不是原div,他是一个虚拟dom对象,标签名相同
  2. 属性更新:更新样式,更新属性,处理事件
  3. 子节点更新:更新内容,更新子节点,
属性更新
 /**
   * 在mountComponent中通过这个方法处理DOM节点的属性和时间
   * 1  如果存在事件,则针对当前的节点添加事件代理,既调用enqueuePutListener(this, propKey, propValue, transaction);
   * 2  如果存在样式,首先会对样式进行合并,Object.assign({},props.style,);然后通过CSSPropertyOperations.createMarkupForStyles( propValue,this,)创建样式
   * 3  通过DOMPropertyOperations.createMarkupForProperty(propKey,propValue,);创建属性
   * 4  通过DOMPropertyOperations.createMarkupForID(this._domID)创建唯一标识
   */
  _createOpenTagMarkupAndPutListeners: function(transaction, props) {
    var ret = '<' + this._currentElement.type;
    //for in + hasOwnProperty组合,for in会迭代原型链,hasOwnProperty只是该对象
    //迭代属性,如果属性不在该props上执行下次循环
    for (var propKey in props) {
      if (!props.hasOwnProperty(propKey)) {
        continue;
      }
      var propValue = props[propKey];
      if (propValue == null) {
        continue;//取出来的属性为null,执行下次循环
      }
      if (registrationNameModules.hasOwnProperty(propKey)) {//????应该是事件
        if (propValue) {
          //添加事件代理
          enqueuePutListener(this, propKey, propValue, transaction);
        }
      } else {
        if (propKey === STYLE) {
          if (propValue) {
            //如果有样式,合并样式
            propValue = this._previousStyleCopy = Object.assign({},props.style,);
          }
          //创建样式
          propValue = CSSPropertyOperations.createMarkupForStyles( propValue,this,);
        }
        //创建属性标识
        var markup = null;
        if (this._tag != null && isCustomComponent(this._tag, props)) {
          if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
            markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey,propValue,);
          }
        } else {
          markup = DOMPropertyOperations.createMarkupForProperty(propKey,propValue,);
        }
        if (markup) {
          ret += ' ' + markup;
        }
      }
    }
    //静态页面,不设置react-id
    if (transaction.renderToStaticMarkup) {
      return ret;
    }
    //设置react-id
    if (!this._hostParent) {
      ret += ' ' + DOMPropertyOperations.createMarkupForRoot();
    }
    ret += ' ' + DOMPropertyOperations.createMarkupForID(this._domID);
    return ret;
  },

复制代码
当执行receiveComponent方法时,通过this.updateComponent()更新DOM节点属性
  receiveComponent: function(nextElement, transaction, context) {
    var prevElement = this._currentElement;
    this._currentElement = nextElement;
    //更新DOM节点属性
    this.updateComponent(transaction, prevElement, nextElement, context);
  }
复制代码
在updateComponent中通过this._updateDOMProperties(lastProps, nextProps, transaction)更新DOM节点属性
  /**
   * 先是删除不需要的旧属性
   *    如果不需要旧样式,则遍历旧样式集合,并对每个样式进行置空操作
   *    如果不需要事件,则将其的事件监听去掉,针对当前节点取消事件代理deleteListener(this, propKey)
   *    如果旧属性不在新属性集合中,则需要删除旧属性DOMPropertyOperations.deleteValueForProperty(getNode(this), propKey);
   * 然后更新新属性
   *    如果存在新样式,则将新样式进行合并Object.assign({}, nextProp)
   *    如果在旧样式中但不在新样式中,则清除该样式
   *    如果既在旧样式中也在新样式中,且不相同,则更新该样式styleUpdates[styleName] = nextProp[styleName];
   *    如果在新样式中,但不在旧样式中,则直接更新为新样式styleUpdates = nextProp;
   *    如果存在事件更新,则添加事件监听的属性enqueuePutListener(this, propKey, nextProp, transaction);
   *    如果存在新属性,则添加新属性,或者更新旧的同名属性DOMPropertyOperations.setValueForAttribute( getNode(this), propKey, nextProp, );
   * 
   */
  _updateDOMProperties: function(lastProps, nextProps, transaction) {
    var propKey;
    var styleName;
    var styleUpdates;
    for (propKey in lastProps) {
      //旧属性不在新属性集合中
      //新属性集合中包括旧属性or旧属性在旧属性原型链上or旧属性为null,执行下次循环,相当于删除了这个属性
      if ( nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey) || lastProps[propKey] == null ) {
        continue;
      }
      //从dom上删除不需要的样式??? TODO 这不是删除了所有样式吗
      if (propKey === STYLE) {
        var lastStyle = this._previousStyleCopy;
        for (styleName in lastStyle) {
          if (lastStyle.hasOwnProperty(styleName)) {
            styleUpdates = styleUpdates || {};
            styleUpdates[styleName] = '';
          }
        }
        this._previousStyleCopy = null;
      } else if (registrationNameModules.hasOwnProperty(propKey)) {
        if (lastProps[propKey]) {
          //去掉事件监听,取消事件代理
          deleteListener(this, propKey);
        }
      } else if (isCustomComponent(this._tag, lastProps)) {
        if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
          DOMPropertyOperations.deleteValueForAttribute(getNode(this), propKey);
        }
      } else if (DOMProperty.properties[propKey] ||DOMProperty.isCustomAttribute(propKey)) {
        //删除不需要的属性
        DOMPropertyOperations.deleteValueForProperty(getNode(this), propKey);
      }
    }
    for (propKey in nextProps) {
      var nextProp = nextProps[propKey];
      var lastProp = propKey === STYLE ? this._previousStyleCopy : lastProps != null ? lastProps[propKey] : undefined;
      //不在新属性中,或者和旧属性相同跳过
      if ( !nextProps.hasOwnProperty(propKey) || nextProp === lastProp || (nextProp == null && lastProp == null) ) {
        continue;
      }
      if (propKey === STYLE) {
        if (nextProp) {
          //合并样式
          nextProp = this._previousStyleCopy = Object.assign({}, nextProp);
        } else {
          this._previousStyleCopy = null;
        }
        if (lastProp) {
          //在旧样式中不在新样式中,清除该样式
          for (styleName in lastProp) {
            if (lastProp.hasOwnProperty(styleName) &&(!nextProp || !nextProp.hasOwnProperty(styleName))) {
              styleUpdates = styleUpdates || {};
              styleUpdates[styleName] = '';
            }
          }
          // 既在旧样式中,也在新样式中,且不相同,则更新该样式
          for (styleName in nextProp) {
            if (nextProp.hasOwnProperty(styleName) &&lastProp[styleName] !== nextProp[styleName]) {
              styleUpdates = styleUpdates || {};
              styleUpdates[styleName] = nextProp[styleName];
            }
          }
        } else {
          // 不存在旧样式,直接写入新样式
          styleUpdates = nextProp;
        }
      } else if (registrationNameModules.hasOwnProperty(propKey)) {
        if (nextProp) {
          //添加事件监听的属性
          enqueuePutListener(this, propKey, nextProp, transaction);
        } else if (lastProp) {
          deleteListener(this, propKey);
        }
        //添加新的属性,或者是更新旧的同名属性
      } else if (isCustomComponent(this._tag, nextProps)) {
        if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
          //更新属性
          DOMPropertyOperations.setValueForAttribute( getNode(this), propKey, nextProp, );
        }
      } else if ( DOMProperty.properties[propKey] || DOMProperty.isCustomAttribute(propKey) ) {
        var node = getNode(this);
        if (nextProp != null) {
          DOMPropertyOperations.setValueForProperty(node, propKey, nextProp);
        } else {
          //如果更新为null或者undefined 则执行删除属性操作
          DOMPropertyOperations.deleteValueForProperty(node, propKey);
        }
      }
    }
    //如果styleUpdates不为空,则设置新样式
    if (styleUpdates) {
      CSSPropertyOperations.setValueForStyles(getNode(this),styleUpdates,this,);
    }
  },

复制代码

更新子节点

在执行mountComponent方法时,通过this._createContentMarkup(transaction, props, context);处理DOM节点的内容
  _createContentMarkup: function(transaction, props, context) {
    var ret = '';
    //获取子节点渲染出的内容
    var innerHTML = props.dangerouslySetInnerHTML;
    if (innerHTML != null) {
      if (innerHTML.__html != null) {
        ret = innerHTML.__html;
      }
    } else {
      var contentToUse = CONTENT_TYPES[typeof props.children] ? props.children : null;
      var childrenToUse = contentToUse != null ? null : props.children;
      if (contentToUse != null) {
        // TODO: Validate that text is allowed as a child of this node
        ret = escapeTextContentForBrowser(contentToUse);
      } else if (childrenToUse != null) {
        //对子节点进行初始化渲染
        var mountImages = this.mountChildren( childrenToUse, transaction, context, );
        ret = mountImages.join('');
      }
    }
    // 是否需要换行
    if (newlineEatingTags[this._tag] && ret.charAt(0) === '\n') {
      return '\n' + ret;
    } else {
      return ret;
    }
  },

复制代码
当执行receiveComponent方法时,通过this._updateDOMChildren(lastProps, nextProps, transaction, context);更新DOM内容和子节点
  /**
   *  先是删除不需要的子节点和内容
   *      如果存在旧节点,而新节点不存在,说明当前节点在更新之后删除,执行this.updateChildren(null, transaction, context);
   *      如果旧的内容存在,而新的内容不存在,说明当前内容在更新后被删除,此时执行 this.updateTextContent('');
   *  更新子节点和内容
   *      如果新子节点存在,则更新其子节点,此时执行this.updateChildren(nextChildren, transaction, context);
   *      如果新的内容存在,则更新内容,此时执行方法this.updateTextContent('' + nextContent);
   * 
   */
  _updateDOMChildren: function(lastProps, nextProps, transaction, context) {
    //初始化
    var lastContent = CONTENT_TYPES[typeof lastProps.children]  ? lastProps.children : null;
    var nextContent = CONTENT_TYPES[typeof nextProps.children] ? nextProps.children : null;
    var lastHtml = lastProps.dangerouslySetInnerHTML && lastProps.dangerouslySetInnerHTML.__html;
    var nextHtml = nextProps.dangerouslySetInnerHTML && nextProps.dangerouslySetInnerHTML.__html;

    var lastChildren = lastContent != null ? null : lastProps.children;
    var nextChildren = nextContent != null ? null : nextProps.children;

    var lastHasContentOrHtml = lastContent != null || lastHtml != null;
    var nextHasContentOrHtml = nextContent != null || nextHtml != null;
    if (lastChildren != null && nextChildren == null) {
      //旧节点存在,而新节点不存爱,说明当前节点在更新后被删除了
      this.updateChildren(null, transaction, context);
    } else if (lastHasContentOrHtml && !nextHasContentOrHtml) {
      //说明当前内容在更新后被删除了
      this.updateTextContent('');
    }
    //新节点存在
    if (nextContent != null) {
      if (lastContent !== nextContent) {
        //更新内容
        this.updateTextContent('' + nextContent);
      }
    } else if (nextHtml != null) {
      //更新属性标识
      if (lastHtml !== nextHtml) {
        this.updateMarkup('' + nextHtml);
      }
    } else if (nextChildren != null) {
      //更新子节点
      this.updateChildren(nextChildren, transaction, context);
    }
  },
复制代码
weixin_34290096
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
「React源码分析」七. React DOM之Root根节点操作分析
u012922190的博客
11-14 1086
2021SC@SDUSC
React源码解析ReactDOM.render源码
weixin_33817333的博客
10-16 176
https://github.com/jimwmg/Rea... 1 React.createClass( ) <body> <div id="root"></div> <script type='text/babel'> var HelloWorld = React.cr...
前端React教程第六课 虚拟DOM
fegus的博客
05-15 299
09 真正理解虚拟 DOM：React 选它，真的是为了性能吗？ 在过去的十年里，前端技术日新月异。从最早的纯静态页面，到 jQuery 一统江湖，再到近几年大火的 MVVM 框架——研发模式升级这件事情对于前端来说，好像成了某种常态。其实研发模式不断演进的背后，恰恰蕴含着前端人对 “DOM 操作” 这一核心动作的持续思考和改进。而虚拟 DOM，正是先驱们在这个过程中孕育出的一颗明珠。 在 MVVM 框架这个领域分支，有一道至今仍然非常经典的面试题：“为什么我们需要虚拟 DOM？”。 这个问题比较常见的回
React 深度学习：ReactDOM
weixin_30291791的博客
06-28 454
packages/react-dom/src/client/ReactDOM.js ReactDOM const ReactDOM: Object = { createPortal, findDOMNode( componentOrElement: Element | ?React$Component<any, any>, ): null | Element ...
深入浅出react---2.解读react源码
weixin_38245947的博客
06-19 366
1.virtual dom模型 2.生命周期的管理艺术 3.解密setState机制 4.diff算法 5.React Patch 方法 6.react-router原理
react-fireblog-源码.rar
10-10
《React Fireblog 源码解析》 React Fireblog 是一个基于 React.js 和 Firebase 的博客构建框架，它允许开发者快速创建、管理和发布博客内容。在深入理解 React Fireblog 源码之前，我们先要对 React 和 Firebase ...
商业编程-源码-动态模板解析技术源码.zip
06-22
在本压缩包中，"商业编程-源码-动态模板解析技术源码"包含了实现这一技术的源代码，这对于深入理解和实践动态模板解析至关重要。 动态模板解析技术的核心是将HTML模板与业务逻辑相分离，使得开发者可以在不修改后端...
Source-code-analysis-react:React15个原始人解析-源码解析
03-24
在深入探讨React 15的源码解析之前，我们先要理解React作为一个JavaScript库的核心价值。React是由Facebook开发并维护的，它主要用于构建用户界面，尤其是单页面应用程序。其核心理念是组件化，允许开发者将复杂的UI...
react-deep-learning:React原始解析及生态圈
03-23
项目描述中的"React原始解析"涉及的是React的基本语法和生命周期方法。React组件有自己的生命周期，包括挂载阶段（如`componentWillMount`, `render`, `componentDidMount`）、更新阶段（`componentWillReceiveProps...
react-express-solo-project
03-27
2. **虚拟DOM**：React使用虚拟DOM来提高性能，它在内存中保存了UI的状态，只更新必要的部分，而不是每次变更都重新渲染整个页面。 3. **JSX语法**：React引入了一种叫做JSX的语法糖，它允许开发者在JavaScript中写...
React16源码解读：揭秘ReactDOM
最新发布
2401_84097393的博客
04-13 880
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**
【React】ReactDOM.render源码分析
橙煦媛的博客
08-04 5124
这是一个hello world，你造咩ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );ReactDOM.render()实际调用ReactMount.render() /** * @param {ReactElement} nextElement 要插入到DOM中的组件
React路上遇到的那些问题以及解决方案
热门推荐
高山上的鱼
04-01 16万+
问题1：首先必须在键名后面添加一个空格，否则报错 Module build failed: YAMLException: can notread a block mapping entry; a multiline key may not be an implicit key at line6, column 1: 必须是如：name  :'Hello world!' 还有一个可能，如下
「React源码分析」五. React DOM中对Node节点的属性操作分析
u012922190的博客
10-30 378
2021SC@SDUSC
React源码分析（二）=> Reac初次渲染分析
翾的博客
07-02 5331
Reac初次渲染分析 源码基于React 16.8.6, 内容极长, 必须配合源码一起来看 单步调试的例子: `ReactDOM.render('hello', document.getElementById('root'))`; 下文基于这个例子来一步一步分析.
初识 React
YCHH1的博客
05-30 440
一、浏览器相关 (1) 浏览器的渲染引擎 (2) 渲染引擎 描述 1 用户的请求资源通过浏览器的网络层到达渲染引擎后,渲染引擎开始工作 2 每次渲染的文档不会超过 8k 的数据块 3 渲染引擎的职责就是渲染,在浏览器窗口显示所有请求的内容 (3) 两个树 DOM Tree 和 Render Tree 3.1 DOM Tree 全称 document object model , 即我们所熟知的文档对象模型,我们可以把它看成 html 元素 对外的接口,有了这些接口 javascript 开发人员
React 深度学习：4. 创建 DOM 元素
weixin_34112181的博客
06-05 775
React 初次渲染的时候无非会经历如下四个步骤：ReactElement 元素的创建，以及它如何表达嵌套在上个章节中也已阐述。React 的难点就在于如何进行数据处理，并且保持高效，我们暂且忽略它。秉持由浅入深的原则进行学习。想要从ReactElement 元素的层层嵌套结构中解析出 DOM，能直接想到的办法就是使用递归。在遇到每一层的时候根据元素类型创建不同的 DOM 元素，最后将这一个庞大...
react-router-dom
08-02
其中，react-router-dom是基于react-router的一个包，用于在浏览器运行环境下提供路由功能。在浏览器中使用React Router时，只需要安装react-router-dom，它会自动安装react-router的依赖。你可以使用以下命令安装...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值