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>
);

待续----

转载于:https://www.cnblogs.com/yyzyxy/p/9961306.html