溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下關于React元素渲染的簡介，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
元素是構成 React 應用的最小單位，它用于描述屏幕上輸出的內容。
const element = <h2>Hello, world!</h2>;
與瀏覽器的 DOM 元素不同，React 當中的元素事實上是普通的對象，React DOM 可以確保 瀏覽器 DOM 的數據內容與 React 元素保持一致。
將元素渲染到 DOM 中
首先我們在一個 HTML 頁面中添加一個 id="example" 的 <div>:
<div id="example"></div>
在此 div 中的所有內容都將由 React DOM 來管理，所以我們將其稱為 "根" DOM 節點。
我們用 React 開發應用時一般只會定義一個根節點。但如果你是在一個已有的項目當中引入 React 的話，你可能會需要在不同的部分單獨定義 React 根節點。
要將React元素渲染到根DOM節點中，我們通過把它們都傳遞給 ReactDOM.render() 的方法來將其渲染到頁面上：
const element = <h2>Hello, world!</h2>;
ReactDOM.render(
element,
document.getElementById('example')
);
更新元素渲染
React 元素都是不可變的。當元素被創建之后，你是無法改變其內容或屬性的。
目前更新界面的唯一辦法是創建一個新的元素，然后將它傳入 ReactDOM.render() 方法：
來看一下這個計時器的例子:
function tick() {
const element = (
<div>
<h2>Hello, world!</h2>
<h3>現在是 {new Date().toLocaleTimeString()}.</h3>
</div>
);
ReactDOM.render(
element,
document.getElementById('example')
);
}
setInterval(tick, 1000);運行結果
以上實例通過 setInterval() 方法，每秒鐘調用一次 ReactDOM.render()。
我們可以將要展示的部分封裝起來，以下實例用一個函數來表示：
function Clock(props) {
return (
<div>
<h2>Hello, world!</h2>
<h3>現在是 {props.date.toLocaleTimeString()}.</h3>
</div>
);
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('example')
);
}
setInterval(tick, 1000);除了函數外我們還可以創建一個 React.Component 的 ES6 類，該類封裝了要展示的元素，需要注意的是在 render() 方法中，需要使用 this.props 替換 props：
class Clock extends React.Component {
render() {
return (
<div>
<h2>Hello, world!</h2>
<h3>現在是 {this.props.date.toLocaleTimeString()}.</h3>
</div>
);
}
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('example')
);
}
setInterval(tick, 1000);看完了這篇文章，相信你對關于React元素渲染的簡介有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
