React之渲染元素

Jenny_Tong 發(fā)布于2019-08-21 15:49 / 2769人閱讀

摘要：渲染元素開(kāi)場(chǎng)白接著上一節(jié)的講解后我們大概清楚了以下幾個(gè)事兒知道是個(gè)什么東東為什么要推薦使用以及的一些基本語(yǔ)法。本篇文章談一下是怎么渲染元素的。更新已渲染的元素元素是不可變的，一旦你創(chuàng)建了一個(gè)元素，就不能再修改其子元素或任何屬性。

React-渲染元素 開(kāi)場(chǎng)白

接著上一節(jié)JSX的講解后：我們大概清楚了以下幾個(gè)事兒:
知道JSX是個(gè)什么東東

為什么React要推薦使用JSX

以及JSX的一些基本語(yǔ)法。


本篇文章談一下React是怎么渲染元素的。

元素

元素是React應(yīng)用中的最小部件，正是由一個(gè)或多個(gè)元素構(gòu)建出來(lái)了組件。
一個(gè)元素用于描述你將在屏幕上看到的內(nèi)容，比如：

const element = Hello, world
;

渲染元素到DOM 根DOM節(jié)點(diǎn)

假設(shè)我們的HTML文件中有這樣的一個(gè)

我們稱這是一個(gè)根DOM節(jié)點(diǎn)，該節(jié)點(diǎn)內(nèi)的所有內(nèi)容都是有React DOM管理

注意

一個(gè)用React構(gòu)建的應(yīng)用程序通常只有一個(gè)根DOM節(jié)點(diǎn)。

但是如果把這些應(yīng)用程序整合到現(xiàn)有的app當(dāng)中去，那么該app中就可能會(huì)包含多個(gè)相互獨(dú)立的根DOM節(jié)點(diǎn)。

更新已渲染的元素

React元素是不可變的，一旦你創(chuàng)建了一個(gè)元素，就不能再修改其子元素或任何屬性。
更新UI的唯一方法是創(chuàng)建一個(gè)新的元素，并將其傳入到ReactDOM.render()方法。
來(lái)思考下時(shí)鐘的例子,完整代碼如下：




    
    rendering-elements

以上代碼，每隔1秒，就會(huì)通過(guò)setInterval()回調(diào)ReactDOM.render()方法來(lái)重新渲染元素。

注意:

實(shí)際上，大多數(shù) React 應(yīng)用只會(huì)調(diào)用 ReactDOM.render() 一次。在接下來(lái)的章節(jié)中，我們將學(xué)習(xí)如何將這些代碼封裝到有狀態(tài)的組件中。

React 只更新必需要更新的部分

React DOM 會(huì)將元素及其子元素與之前版本逐一對(duì)比, 并只對(duì)有必要更新的 DOM 進(jìn)行更新, 以達(dá)到 DOM 所需的狀態(tài)。
我們對(duì) 上一個(gè)例子進(jìn)行檢查來(lái)驗(yàn)證這一點(diǎn):

從上圖中我們可以看出，即使我們我們每隔 1 秒都重建了整個(gè)元素, 但實(shí)際上 React DOM 只更新了修改過(guò)的文本節(jié)點(diǎn)。
本文做為自己加強(qiáng)記憶之篇，均參考自：
http://www.css88.com/react/do...，在此列出，大家共同學(xué)習(xí)。

歡迎大家訪問(wèn)我的blog，有更精彩的文章吆！