• React入门-ReactDOM.render()介绍


    React中的核心概念

    • 1 虚拟DOM(Virtual DOM)
    • 2 Diff算法(虚拟DOM的加速器,提升React性能的法宝)

    虚拟DOM(Vitural DOM)

    React将DOM抽象为虚拟DOM,虚拟DOM其实就是用一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率

    为什么用虚拟dom,当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大

    VituralDOM的处理方式

    • 1 用 JavaScript 对象结构表示 DOM 树的结构,然后用这个树构建一个真正的 DOM 树,插到文档当中
    • 2 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
    • 3 把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了

    Diff算法

    当你使用React的时候,在某个时间点 render() 函数创建了一棵React元素树,
    在下一个state或者props更新的时候,render() 函数将创建一棵新的React元素树,
    React将对比这两棵树的不同之处,计算出如何高效的更新UI(只更新变化的地方)

    一、ReactDOM.render()

    React最基本方法,

        用于将模版转换成HTML语言,渲染DOM,并插入指定的DOM节点中    

        该方法有3个参数 :

        - 模版的渲染内容(HTML形式)    

        - 需要插入的DOM节点    

        -  渲染后的回调(一般用不到)

    // 1. 导入 react
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 2. 创建 虚拟DOM
    // 参数1:元素名称  参数2:元素属性对象(null表示无)  参数3:当前元素的子元素string||createElement() 的返回值
    const divVD = React.createElement('div', {
      title: 'hello react'
    }, 'Hello React!!!')
    
    // 3. 渲染
    // 参数1:虚拟dom对象  参数2:dom对象表示渲染到哪个元素内 参数3:回调函数
    ReactDOM.render(divVD, document.getElementById('app'))

    链接:https://www.zhihu.com/question/27602269/answer/40168594
    来源:知乎

    react中createFactory, createClass, createElement分别在什么场景下使用,为什么要这么定义?



    三者用途稍有不同,按依赖关系调整下顺序:
    1. createClass,如其名就是创建React组件对应的类,描述你将要创建组件的各种行为,其中只有当组件被渲染时需要输出的内容的render接口是必须实现的,其他都是可选:
    var Hello = React.createClass({
        render: function() {
            return <div>Hello Taobao, Hello UED</div>;
        }
    });
    

    2. createElement,创建React组件实例,支持type,config,children三个参数:
    ReactElement.createElement = function(type, config, children) {
      ...
    }
    

    如我们在jsx中描述的 < Hello /> ,编译后就是 React.createElement(Hello)

    3. createFactory,通过工厂方法创建React组件实例,在js里要实现工厂方法只需创建一个带type参数的createElement的绑定函数:
    ReactElement.createFactory = function(type) {
      var factory = ReactElement.createElement.bind(null, type);
      return factory;
    };
    
    创建模式目的是隔离与简化创建组件的过程,模式的东西自然是可用可不用,如果需要批量创建某个组件时,可以通过工厂方法来实现:
    var h = React.createFactory(Hello);
    h({x:1})
    h({x:2})
    h({x:3})
    当前位置: 主页 > 学无止境 > WEB前端 > 文章

    React入门 createClass使用说明

    发布时间: 2016-04-08 作者: 迹忆 浏览次数: 4693

    在使用React.createClass之前,我们先来看官方给出的解释

    ReactClass createClass(object specification)

    创建一个给出说明的组件类(这个给出的说明也就是其参数 object specification)。这个组件实现一个render方法,并且render方法返回一个单一的节点。这个返回的节点可能包含任意深度的子节点结构。该方法与标准的原型类不同的地方就是不用使用new去实例化对象。这些组件被很好的封装起来,可以很好的为你创建后台实例。

    当然,单看这些定义我是不知道该如何去使用createClass方法的(我觉的我翻译的不够标准)。那下面我们直接通过一个实例来解释如何使用React.createClass()。

    在本篇文章,我们只是实现render方法,并且在介绍应该注意的问题。对于object specification的详细介绍,那就涉及到了组件的详细说明和生命周期的知识,在本篇我们不做介绍。

    例一

    var Root = React.createClass({
        render:function(){
            return (
              <h1>迹忆博客</h1>
            );
        },
    });
    ReactDOM.render(
            <Root />,
            document.getElementById('content')
    );

    这是一个简单的例子。虽说简单,但是有两个需要注意的地方。

    第一点就是生命的Root首字母必须大写,也就是说我们如果将Root 写成root,那么<root />就会被直接解析成html标签(<root></root>)。下面我们来看如下的代码(下面的代码是错误的)

    var root = React.createClass({
        render:function(){
            return (
              <h1>迹忆博客</h1>
            );
        },
    });
    ReactDOM.render(
            <root />,
            document.getElementById('content')
    );

    其解析的结果如下

    <root data-reactid=".0"></root>

    显然这不是我们想要的结果。

    第二点是,在一个createClass创建的组件中只能有一个根节点。这个根节点可以有任意层的子节点。下面我们看如下的代码

    var Root = React.createClass({
        render:function(){
            return (
              <h1>迹忆博客</h1>
              <a>www.onmpw.com</a>
            );
        },
    });
    ReactDOM.render(
            <Root />,
            document.getElementById('content')
    );

    这段代码也是存在错误的,在解析过程中会报如下的错误

    SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (22:18) 20 | return ( 21 | <h1>迹忆博客</h1> > 22 | <a>www.onmpw.com</a> | ^ 23 | ); 24 | }, 25 | }); ...("+loc.line+":"+loc.column+")";var err=new SyntaxError(message);err.pos=pos;err....

    因此如果我们想要实现上述我们想要的结果,可以在h1和a的外面再加一层节点。如下

    例二

    var Root = React.createClass({
        render:function(){
            return (
              <div>
                <h1>迹忆博客</h1>
                <a>www.onmpw.com</a>
              </div>
            );
        },
    });
    ReactDOM.render(
            <Root />,
            document.getElementById('content')
    );

    这样就能保证一个组件中只有一个根节点,又能实现我们想要的效果。

    其实对于render来说,该方法会返回一个React组件树,用来接受该组件树的变量名称必须首字母大写。并且该组件树只能有一个根节点,这也是符合实际情况的。最终这棵组件树会被ReactDOM.render渲染成HTML标签。

    对于例二中的<div>标签,它并不是一个真正的DOM节点,而是一个虚拟的DOM节点。你可以这样认为,组件树中的这些节点就是一些标记或者数据,只是React知道该如何处理这些标记或者数据。

    其实React.createClass的知识点很多,这里我只是简单介绍在使用过程中应该注意的问题。

     
  • 相关阅读:
    Paint类的介绍
    缓存淘汰算法之LRU
    Android SurfaceView实战 打造抽奖转盘
    android中scrollTo和scrollBy的理解
    Android View.onMeasure方法的理解
    Android Context 上下文 你必须知道的一切
    Android Animation简述
    Markdown 语法说明
    理解Java虚拟机体系结构
    Java集合框架:HashMap
  • 原文地址:https://www.cnblogs.com/susan-home/p/8675291.html
Copyright © 2020-2023  润新知