React之渲染元素

Jenny_Tong 發布于2019-08-21 15:49 / 2762人閱讀

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

React-渲染元素 開場白

接著上一節JSX的講解后：我們大概清楚了以下幾個事兒:

知道JSX是個什么東東

為什么React要推薦使用JSX

以及JSX的一些基本語法。

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

元素

元素是React應用中的最小部件，正是由一個或多個元素構建出來了組件。
一個元素用于描述你將在屏幕上看到的內容，比如：

const element = Hello, world
;

渲染元素到DOM 根DOM節點

假設我們的HTML文件中有這樣的一個

我們稱這是一個根DOM節點，該節點內的所有內容都是有React DOM管理

注意

一個用React構建的應用程序通常只有一個根DOM節點。

但是如果把這些應用程序整合到現有的app當中去，那么該app中就可能會包含多個相互獨立的根DOM節點。

更新已渲染的元素

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




    
    rendering-elements

以上代碼，每隔1秒，就會通過setInterval()回調ReactDOM.render()方法來重新渲染元素。

注意:

實際上，大多數 React 應用只會調用 ReactDOM.render() 一次。在接下來的章節中，我們將學習如何將這些代碼封裝到有狀態的組件中。

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

React DOM 會將元素及其子元素與之前版本逐一對比, 并只對有必要更新的 DOM 進行更新, 以達到 DOM 所需的狀態。
我們對上一個例子進行檢查來驗證這一點:

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

歡迎大家訪問我的blog，有更精彩的文章吆！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88268.html

react之生命周期淵源

摘要：組件是否應當渲染新的或，返回表示跳過后續的生命周期方法，通常不需要使用以避免出現。組件銷毀生命周期函數的淵源自定義組件的生命周期主要通過三種狀態進行管理，它們負責通知組件當前所處的狀態，應該執行生命周期中的哪個步驟，是否可以更新。生命周期有哪些以及用法首次實例化 getDefaultProps作用于組件類，只調用一次，返回對象用于設置默認的props，對于引用值，會在實例中共享 ...

qingshanli1988 2019-08-22 13:52 評論0 收藏0
React源碼解析之ReactDOM.render()

摘要：一更新的方式有三種渲染接下來，我們就來看下源碼二作用在提供的里渲染一個元素，并返回對該組件的引用常見的用法是這個官網網址源碼服務端使用方法渲染節點是讓服務端盡可能復用節點，提高性能元素容器應用渲染結束后，調用的函數錯誤抓取方法本質是返回 showImg(https://segmentfault.com/img/remote/1460000020064414?w=1240&h=641);...

iKcamp 2019-08-26 10:45 評論0 收藏0
react源碼解析之stack reconciler

摘要：爭取把源碼剖析透學習透。除了用戶定義的復合組件外元素還可能表示特定于平臺的主機組件。裝載的具體結果有時在源代碼中稱為裝載映像取決于渲染器，可能為節點字符串服務器或表示本機視圖的數值。其所缺少的關鍵部分是對更新的支持。關于源碼解讀的系列文章，可以關注我的github的這個倉庫, 現在才剛剛寫，后續有空就寫點。爭取把react源碼剖析透學習透。有不正確的地方希望大家幫忙指正。大家互相學習...

ky0ncheng 2019-08-22 17:30 評論0 收藏0
4、React組件之性能優化

摘要：組件的性能優化高德納我們應該忘記忽略很小的性能優化，可以說的情況下，過早的優化是萬惡之源，而我們應該關心對性能影響最關鍵的另外的代碼。對多個組件的性能優化當一個組件被裝載更新和卸載時，組件的一序列生命周期函數會被調用。 React組件的性能優化高德納: 我們應該忘記忽略很小的性能優化，可以說97%的情況下，過早的優化是萬惡之源，而我們應該關心對性能影響最關鍵的另外3%的代碼。...

陳偉 2019-08-22 15:01 評論0 收藏0
精益 React 學習指南（Lean React）- 1.1 React 介紹

摘要：單向數據流應用的核心設計模式，數據流向自頂向下我也是性子急的人，按照技術界的慣例，在學習一個技術前，首先得說一句。然而的單向數據流的設計讓前端定位變得簡單，頁面的和數據的對應是唯一的我們可以通過定位數據變化就可以定位頁面展現問題。書籍完整目錄 1.1 React 介紹 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...

lsxiao 2019-08-19 18:20 評論0 收藏0