zoukankan      html  css  js  c++  java
  • React系列--jsx语法及虚拟dom,渲染

    1. 虚拟dom:其实感觉就跟dom是一样的,只不过是写在js的结构中,而不是写在html结构中。 此时需要babel去解析,遇到<认为是html,遇到{}认为是js变量。

    <script type="text/babel">          //使用babel

      //创建虚拟DOM,有两种,一种不常用

        let element1=React.createElement("h1",{id:"haha",className:"haha"},"这是利用createElement创建的dom");  //不常用

        let e2=<h2>这是直接创建的dom</h2>   //写法简单,常用,相当于在js中写html

      //渲染虚拟dom

        ReactDOM.render(e2,document.getElementById('example'));

    </script>

    2.https://www.jianshu.com/p/616999666920

    虚拟dom是干什么用的?当要改变多次dom结构时,浏览器会改变一次渲染一次全流程,耗能。而虚拟dom则可以把更新的diff内容存在一个js对象中,最终将这个js对象一次性attach到dom树上,然后再去通知浏览器绘制,避免了无谓的计算。

    3.https://www.cnblogs.com/zourong/p/6043914.html

    JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。

    如下(JS写法)

    var child1 = React.createElement('li', null, 'First Text Content');
    var child2 = React.createElement('li', null, 'Second Text Content');
    var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

    等价于(JSX写法)

    复制代码
    var root =(                                                       //js写法
      <ul className="my-list">                        //xml的样子
        <li>First Text Content</li>
        <li>Second Text Content</li>
      </ul>
    );
    复制代码

    待续----

  • 相关阅读:
    Day 15 模块
    Day 14 三元运算符,列表推导式,内置函数
    Day 13 可迭代对象,迭代器对象,for循环迭代,生成器对象,枚举对象
    Day 12 开放封闭原则,装饰器初识
    Day 11 函数对象,函数嵌套,作用域,闭包
    Day 10 函数的形参,实参
    Day 09 函数基础
    Day 08 文件操作模式,文件复制,游标
    HTTP协议
    11,.JS-DOM价绍
  • 原文地址:https://www.cnblogs.com/yyzyxy/p/9961306.html
Copyright © 2011-2022 走看看