React 學習筆記 – 元素

xcwong發表於2017-09-19
React筆記

元素是構成React的最小單位。

const element = <h3>Hello world</h4>

React中的文件中提醒初學者很容易把元素和另一個內涵更加廣泛的定義“元件”弄混了。注意一下。

該怎麼使用元素呢？

我們需要在html頁面新增一個根DOM節點。
例如

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

然後我們把一個元素傳入ReactDOM.render()的方法來將其渲染到頁面上來。

const  element = <h2>Hello world</h2>

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

怎麼讓頁面動起來

React元素都是immutable不可改變的。單元素在被建立之後，你是無法改變其內容或者屬性的。一個元素就是動畫中的一幀，他代表應用介面在某一個時間點的樣子。

那麼我們想到的方法就是不斷的建立新的元素，並不斷的傳入ReactDOM.render()函式。

function tick()
{
    const element =
    <div class=“demo”>
        <h1>Hello world</h1>
        <h2>It is {new Date().toLocaleTimeString() }</h2>
    </div> 
    
    ReactDOM.render(
        element,
        document.getElementById(`root`)
    )
}

setInterval(tick, 1000)

當然我們後面實際開發中應該不會寫這麼傻的程式碼，但是我們通過Source觀察，React並不會更新div.demo中的所有內容，而是隻更新了必要的部分，amazing

相關文章