3.2 Updating the Rendered Element 更新被渲染的元素

React elements are immutable. Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.

React元素是不可變得。你但你創(chuàng)建了元素堰怨,你就不能改變他的子集和屬性嫩絮。元素就像在電影里單獨的幀:它代表不同時間點的UI侈询。

With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render().

據(jù)我所知茫孔,更新UI的唯一方法就是創(chuàng)建一個新的元素并且把它粘貼到ReactDOM.render()里缀雳。

Consider this ticking clock example:

考慮這個滴答作響的時鐘示例:

function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
? ?element,
? ?document.getElementById('root')
?);
}
setInterval(tick, 1000);

Try it on CodePen.

在CodePen上嘗試一下贤斜。

It calls ReactDOM.render() every second from a setInterval() callback.

它通過一個setInterval()回調(diào)函數(shù)每隔一秒調(diào)用一次ReactDOM.render()懂酱。

Note:
In practice, most React apps only call ReactDOM.render() once. In the next sections we will learn how such code gets encapsulated into stateful components.
We recommend that you don't skip topics because they build on each other.
注意
實際上,大多數(shù)React應用只會調(diào)用一次ReactDOM.render()茄猫。在接下來的章節(jié)中狈蚤,我們將學習如何將這些代碼封裝到有狀態(tài)的組件中。
我們建議您不要跳過本主題划纽,因為它們彼此之間存在關(guān)聯(lián)脆侮。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市阿浓,隨后出現(xiàn)的幾起案子他嚷,更是在濱河造成了極大的恐慌,老刑警劉巖芭毙,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件筋蓖,死亡現(xiàn)場離奇詭異,居然都是意外死亡退敦,警方通過查閱死者的電腦和手機粘咖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來侈百,“玉大人瓮下,你說我怎么就攤上這事《塾颍” “怎么了讽坏?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長例证。 經(jīng)常有香客問我路呜,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任胀葱,我火速辦了婚禮漠秋,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘抵屿。我一直安慰自己庆锦,他們只是感情好,可當我...
    茶點故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布轧葛。 她就那樣靜靜地躺著搂抒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪尿扯。 梳的紋絲不亂的頭發(fā)上燕耿,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天,我揣著相機與錄音姜胖,去河邊找鬼。 笑死淀散,一個胖子當著我的面吹牛右莱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播档插,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼慢蜓,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了郭膛?” 一聲冷哼從身側(cè)響起晨抡,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎则剃,沒想到半個月后耘柱,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡棍现,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年调煎,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片己肮。...
    茶點故事閱讀 40,503評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡士袄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出谎僻,到底是詐尸還是另有隱情娄柳,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布艘绍,位于F島的核電站赤拒,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜需了,卻給世界環(huán)境...
    茶點故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一跳昼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧肋乍,春花似錦鹅颊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至觅闽,卻和暖如春帝雇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蛉拙。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工尸闸, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人孕锄。 一個月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓吮廉,卻偏偏與公主長得像,于是被迫代替她去往敵國和親畸肆。 傳聞我的和親對象是個殘疾皇子宦芦,可洞房花燭夜當晚...
    茶點故事閱讀 45,512評論 2 359

推薦閱讀更多精彩內(nèi)容