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>
    );
    复制代码

    待续----

  • 相关阅读:
    Win7+IIS伪静态 UrlRewriter配置
    让VS2010打包工具找回丢失的.net 2.0 .
    高效注册DLL控件 让你的IE浏览器复活
    查询及删除重复记录的方法
    .NET代码模板生成工具CodeSmith 5.0.1 专业版完美版下载
    如何使用CslaGen生成CSLA DAL层代码
    用C# + WebBrowser控件抓取AJAX页面的内容[转]
    了解IIS6应用程序池假死问题解决办法
    美化界面2
    C# WebBrowser高级应用
  • 原文地址:https://www.cnblogs.com/yyzyxy/p/9961306.html
Copyright © 2011-2022 走看看