1. 程式人生 > >深入Preact原始碼(一)jsx要轉化成virtualDOM發生了什麼

深入Preact原始碼(一)jsx要轉化成virtualDOM發生了什麼

本文和自己在掘金的同步

jsx要轉化成virtualDOM,首先經過babel,再經過h函式的呼叫形成virtualDOM。具體如下

原始碼連結 ./src/h.js

相當於react得createElement(),jsx經過babel轉碼後是h的迴圈呼叫,生成virtualDOM。

// jsx
<div>
<span className="sss" fpp="xxx">123</span>
<Hello/>
<span>xxx</span>
</div>

// h結果
h(
  "div",
  null,
  h(
    "span"
, { className: "sss", fpp: "xxx" }, "123" ), h(Hello, null), h( "span", null, "xxx" ) );

通過原始碼中h的函式定義也可以看見。h的函式第一個引數是標籤名(如果是元件型別的化就是元件名)、第二個引數是屬性值的key-value物件,後面的引數是所有子元件。

vnode的結構

h函式會根據子元件的不同型別進行封裝,具體如下
- bool 返回 null
- null 返回 “”
- number 返回 String(number)

最後賦值給child變數並存進childdren陣列中,再封裝成下面的vnode結構並返回

{
    nodeName:"div",//標籤名或者函式(自定義元件)
    children:[],//子元件組成的陣列,每一項也是一個vnode
    key:"",//key
    attributes:{}//jsx的屬性
}

相關推薦

深入Preact原始碼jsx化成virtualDOM發生什麼

本文和自己在掘金的同步 jsx要轉化成virtualDOM,首先經過babel,再經過h函式的呼叫形成virtualDOM。具體如下 原始碼連結 ./src/h.js 相當於react得createElement(),jsx經過babel轉碼後是h的迴圈

深入理解 Tomcat原始碼環境搭建和 How Tomcat works 原始碼

轉載自:https://blog.csdn.net/qq_38182963/article/details/78660767 為了瞭解 tomcat 的原理, 樓主費勁心思, 從圖書館借來了絕版的<>, 下載了該書中的例項原始碼, 由於該書已經

深入理解OkHttp原始碼——提交請求

本篇文章主要介紹OkHttp執行同步和非同步請求的大體流程。主要流程如下圖: 主要分析到getResponseWidthInterceptorChain方法,該方法為具體的根據請求獲取響應部分,留著後面的部落格再介紹。 Dispatcher類

深入剖析PHP7核心原始碼- PHP架構與生命週期

PHP7 為什麼這麼快? 全新的zval 更節約的空間,棧上分配記憶體 zend_string 儲存字串的Hash值,陣列查詢的時候不需要進行Hash計算 在HashTable桶內直接存資料,減少了記憶體的申請次數,提升了cache命中率和記憶體訪問速度 zend_parse_parameters改為了巨集

深入理解JavaScript

odi 可能 方式 == tin mini 單詞 包括 fun 編寫高質量 JavaScript 代碼的基本要點 轉載:http://wiki.jikexueyuan.com/project/javascript-depth-understanding/start-jav

react教程JSX語法、組件概念、生命周期介紹

app .org react教程 sna 輸入 卸載 war fun 獲取 JSX React中,推出了一種新的語法取名為JSX,它給了JS中寫HTML標簽的能力,不需要加引號。JSX的語法看起來是一種模板,然而它在編譯以後,會轉成JS語法,只是書寫過程中的語法糖。 JSX

深入理解overlayfs:初識

Overlayfs是一種類似aufs的一種堆疊檔案系統,於2014年正式合入Linux-3.18主線核心,目前其功能已經基本穩定(雖然還存在一些特性尚未實現)且被逐漸推廣,特別在容器技術中更是勢頭難擋。本系列博文將首先介紹overlayfs的基本概念和應用場景,然後通過若干例項描述它的使用方式,

Android 如何從應用深入到Framework

今天,明哥想跟大家聊聊,如何從應用開發,轉向Framework開發。 系統應用開發,現在來說,已經開始脫離系統,單獨拿出來開發,系統定製介面,已提供給應用呼叫,用來增強功能。 原生的桌面,撥號,設定,已經沒法做出差異化優勢,因此都費盡心機,來進行應用深度開發。 對於之前

深入理解JVM——基本原理掃盲篇

前言   JVM一直是java知識裡面進階階段的重要部分,如果希望在java領域研究的更深入,則JVM則是如論如何也避開不了的話題,本系列試圖通過簡潔易讀的方式,講解JVM必要的知識點。 執行流程   我們都知道java一直宣傳的口號是:一次編譯,到處執行。那麼它如何實現的

Python資料處理之為什麼學習 Numpy & Pandas?

今天我們介紹兩個科學運算當中最為重要的兩個模組,一個是numpy,一個是 pandas。任何關於資料分析的模組都少不了它們兩個。 一、主要用途: 資料分析 機器學習 深度學習 二、為什麼使用 numpy & pandas

深入資料庫事務資料庫事務

深入資料庫事務(一)資料庫事務 事務 事務(Transaction),一般是指要做的或所做的事情。在計算機術語中是指訪問並可能更新資料庫中各種資料項的一個程式執行單元(unit)。在計算機術語中,事務通常就是指資料庫事務。 概念 一個數據庫事務通常包含對資料

白話Spring原始碼:怎麼閱讀原始碼

跟大家分享Spring原始碼前我想先聊聊: 為什麼要閱讀原始碼? 怎麼閱讀原始碼? 希望大家在學習某個新的知識前多問幾個為什麼,好奇心是我們學習的一大動力。 一、為什麼要閱讀原始碼 剛入行時,我們會接觸很多框架:spirng,Struts,Hibernate,mybatis等等,

深入剖析tomcat

伺服器端建立serverSocket物件,監聽指定ip、指定埠的請求 客戶端建立socket物件(指定需要請求的伺服器端的ip和埠),發出請求 伺服器端接收到客戶端的請求,建立與之相對應的socket物件,連結建立。serverSocket繼續監聽其他請求 客戶端通過socket的getOutputSt

為什麼UML

1 建模的意義   模型是對於現實的簡化,建模是為了更好的理解系統   模型幫助我們按照實際情況或需求對系統視覺化   模型允許我們詳細說明系統的構造,行為   模型給出一個構造系統的模板   模型對我們做出的決策進行文件化 2 選擇UML   UML(unified modeling lang

深入理解JVM——物件的建立

物件的建立 物件的建立,在語言層面上,通常只是new這個關鍵字而已。(本章所討論的物件限於普通Java物件,不包括陣列和 Class物件)虛擬機器遇到new指令時: 檢查這個指令的引數是否能在常量池定位到一個類的符號引用。 檢查這個符號引用代表的類是否已被載入,解析,初

深入理解JVM——執行時的資料區域

Java與C++的圍牆:記憶體動態分配,垃圾收集技術 程式計數器 當前執行緒所執行的位元組碼的行號指示器,通過改變這個計數器的值來選擇下一條執行的位元組碼指令,分支,迴圈,跳轉,異常處理,執行緒恢復等依賴計數器。 執行緒私有,唯一不會OutOfMemory的區域。 執行Jav

深入理解PlasmaPlasma 框架

這一系列文章將圍繞以太坊的二層擴容框架,介紹其基本執行原理,具體操作細節,安全性討論以及未來研究方向等。本篇文章作為開篇,主要目的是理解 Plasma 框架。 Plasma 作為以太坊的二層擴容框架,自從 2017 年被 Joseph Poon(Lightnin

MFC/Qt下呼叫caffe原始碼---將caffe原始碼生成動態連結庫dll

本人研一,最近想將用caffe訓出的模型,通過MFC做出一個介面,扔進一張圖片,點選預測,即可呼叫預測分類函式完成測試,並且通過MessageBox彈出最終分類的資訊。 首先通過查資料總結出兩種方法,第一:直接呼叫編譯好的caffe原始碼;(本次用到的原始碼是classif

Python資料處理之為什麼學習 Numpy & Pandas?

今天我們介紹兩個科學運算當中最為重要的兩個模組,一個是numpy,一個是 pandas。任何關於資料分析的模組都少不了它們兩個。 一、主要用途: 資料分析 機器學習 深度學習 二、為什麼使用 n

深入解讀快取——快取的力量

應用伺服器的效能優化,是網站開發最複雜,變化最多的地方。優化的手段,主要有:快取、叢集、非同步等等。從今天起,我們就來講講快取。 首先,我們來看幾個例子: 1、淘寶賣家瀏覽的商品集中在少部分 成交數多、評價良好的商品上; 2、百度搜索關鍵詞集中在少部分熱門詞彙上; 3、只有