小白學習React官方文檔看不懂怎麼辦？3.元素渲染

直接上代碼

const element = <h1>Hello, world</h1>;

ReactDOM.render(

    element, 

    document.getElementById('root’)

);

聲明了一個變量element,将JSX文法的h1标簽指派給它，然後React.render()是渲染方法，它可以将element添加到#root中

注意：

    1.根節點隻能有一個

    2.根節點隻能有一個

    3.根節點隻能有一個

const element1=<div>

    <h1>Hello,World!</h1>

    <h2>Hello,Siri!</h2>

</div>

const element2=<h1>

    <small></small>

    <strong></strong>

</h1>

element1的跟節點是div，element2的根節點是h1，根節點隻能有一個！！！

function tick() {

  const element = (

    <div>

      <h1>Hello, world!</h1>

      <h2>It is {new Date().toLocaleTimeString()}.</h2>

    </div>

  );

  ReactDOM.render(element, document.getElementById('root'));

}

setInterval(tick, 1000);//定時器

    上述代碼中，最下面是一個定時器，每1000毫秒，tick執行一次，tick函數做的事情是：聲明一個element變量，

在element中擷取目前時間new Date()是擷取目前時間戳，然後通過toLocalTimeString擷取到目前“上午11:11:11”，再然後通過渲染方法ReactDOM.render()将element放到#root中。每1000毫秒擷取新的時間放到#root中去。

    留心的同學可能會發現element指派後面有一個括号，這個括号是為了友善，如果你不想寫這個括号的話，那麼你必須把代碼寫成這個樣子

  const element = <div>

    </div>;

    注意div被提前了一行，放到了等号後面，如果放到下一行，将出錯。

    這時候有同學可能有疑問了，不是說const聲明的變量不可被修改嗎，為什麼element重複聲明？

    稍微解釋一下：每次都聲明一個新的element變量，新的element變量跟之前的沒有關系，并不是修改，而是重新聲明，比如：

const a=1;

!function() {

  const a=2; //這個a跟外界的a沒有任何關系

}()

注：看不懂的話，請看我另一篇文章let與var與const；

注意：我們的React在這個過程中，實際是引入了一個虛拟DOM的一個概念。雖然我們每1000毫秒都将

    <div>

添加進#root中，但其實真正在操作dom之前，我們親愛的React又做了一步工作，那就是通過偉大的Diff算法來計算我們要新加入的标簽與之前頁面中已經存在的頁面都有哪些差距，然後隻在dom上更新那一點點不同的位置即可。具體Diff算法是怎麼工作的，對于現在的我們，還不需要了解那麼多。