1.元素是構成 React 應用的最小單位，它用于描述螢屏上輸出的內容，
const element = <h1>Hello, react!</h1>;與瀏覽器的 DOM 元素不同，React 當中的元素事實上是普通的物件，React DOM 可以確保 瀏覽器 DOM 的資料內容與 React 元素保持一致，
2.將元素渲染到 DOM 中
首先我們在一個 HTML 頁面中添加一個 id="example" 的 <div>:
<div id="example"></div>在此 div 中的所有內容都將由 React DOM 來管理，所以我們將其稱為 "根" DOM 節點，
我們用 React 開發應用時一般只會定義一個根節點，但如果你是在一個已有的專案當中引入 React 的話，你可能會需要在不同的部分單獨定義 React 根節點，
3.更新元素渲染
React 元素都是不可變的，當元素被創建之后，你是無法改變其內容或屬性的，
目前更新界面的唯一辦法是創建一個新的元素，然后將它傳入 ReactDOM.render() 方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>現在是 {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('example')
);
}
setInterval(tick, 1000);
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229874.html
標籤：其他