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