03. react 初次見面---元素渲染

    與瀏覽器的 DOM 元素不一樣，React 當中的元素事實上是普通的對象，React DOM 能夠確保 瀏覽器 DOM 的數據內容與 React 元素保持一致。

一、將元素渲染到 DOM 中

    首先咱們在一個 HTML 頁面中添加一個 id="root" 的 <div>:

<div id="root"></div>

    在此 div 中的全部內容都將由 React DOM 來管理，因此咱們將其稱之爲 「根」 DOM 節點。

    咱們用React 開發應用時通常只會定義一個根節點。但若是你是在一個已有的項目當中引入 React 的話，你可能會須要在不一樣的部分單獨定義 React 根節點。

Tips：

    新建 React 項目後，在 public 文件夾下面的 index 中有一個 <div id="root"></div> 。

    同時，還看到 <noscript>You need to enable JavaScript to run this app.</noscript> ，查閱了一下 noscript 標籤，大有收穫：

    nosecrpt 標籤是一個至關古老的標籤，其被引入的最初目的是幫助老舊瀏覽器的平滑升級更替，由於早期的瀏覽器並不能支持 JavaScript。noscript 標籤在不支持JavaScript 的瀏覽器中顯示替代的內容。這個元素能夠包含任何 HTML 元素。不過到了如今，瀏覽器不支持 Javascript 的事情應該已經不會出現了，可是用戶也可能由於各類緣由而禁用了 Javascript。如節省流量，延長電池使用時間，或者是不但願本身的隱私被各種統計/追蹤腳本泄露等。

    要將 React 元素渲染到根 DOM 節點中，咱們經過把它們都傳遞給 ReactDom.render( ) 的方法來將其渲染到頁面上：

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

頁面上會展現出 「Hello World」 字樣。

Tips:

    新建 React 項目後，刪除 src 下面的全部文件。而後，新建 index.js 和 index.css。在 index.js 中寫入以下代碼，跑起項目後刷新頁面 會出現 Hello world :

import React from 'react';

import ReactDOM from 'react-dom';

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

ReactDOM.render(

element,

document.getElementById('root')

);

 

 二、更新元素渲染

    React 元素都是immutable 不可變的。當元素被建立以後，你是沒法改變其內容或屬性的。一個元素就好像是動畫裏的一幀，它表明應用界面在某一時間點的樣子。

    根據咱們現階段瞭解的有關 React 知識，更新界面的惟一辦法是建立一個新的元素，而後將它傳入 RreactDOM.render( )  方法：

    將前面寫的 Hello world 中的 index.js的代碼改成以下

import React from 'react';
import ReactDOM from 'react-dom';

function tick(){
  const element = (
    <div>
      <h1>Hello,world</h1>
      <h2>如今北京時間：{new Date().toLocaleTimeString()} </h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

    這就實現了頁面時鐘計時。