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

待續----