React 元素是不可變對象。一旦被創建，你就無法更改它的子元素或者屬性。一個元素就像電影的單幀：它代表了某個特定時刻的 UI。
根據我們已有的知識，更新 UI 唯一的方式是創建一個全新的元素，並將其傳入ReactDOM.render()。
考慮一個計時器的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> -->
<!-- <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function click() {
var element = (
<p>當前時間:{new Date().toLocaleTimeString()}</p>
)
ReactDOM.render(element, document.getElementById('root'))
}
setInterval(click, 1000)
</script>
</body>
</html>這個例子會在 setInterval() 回調函數，每秒都調用 ReactDOM.render()。
注意：browser.min.js包必須導入，因爲瀏覽器不支持jsx寫法，需要使用babel轉譯
React DOM 會將元素和它的子元素與它們之前的狀態進行比較，並只會進行必要的更新來使 DOM 達到預期的狀態。
儘管每一秒我們都會新建一個描述整個 UI 樹的元素，React DOM 只會更新實際改變了的內容，也就是例子中的文本節點。