React系列--jsx语法及虚拟dom，渲染

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

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写法
  
　　　　　　　　　　　　　　　　　　　　　　　　//xml的样子
    
First Text Content
    
Second Text Content
  
);

待续----

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