原创 玩轉Reactjs第四篇-組件(生命週期)
一、前言 前一篇主要介紹了Reactjs組件的創建模式，瞭解了state以及props的基本知識和用法。本篇將重點介紹下Reactjs的生命週期這對於我們認識Reactjs的實現原理，正確使用鉤子函數至關重要。 React
2020-06-17 15:24:58
原创 玩轉Reactjs第五篇-基礎知識(事件&條件&列表&表單)
一、前言 其實在前面介紹組件的時候，已經用到了這些知識，本章節我們重點分析下，並與Vue的用法比較。 二、事件 Reactjs中事件處理方式與原生態DOM的非常類似，只不過使用JSX的語法，採用的是小駝峯的表達方式，比如onCli
2020-04-17 09:35:06
原创 玩轉Reactjs第二篇-渲染和JSX
一、前言 前一章我們搭建了Reactjs的標準工程，本章節我們基於標準工程的demo應用，瞭解react的 渲染和JSX語法。 二、渲染 1、在標準工程的public/index.html下 <div id="root"></div>
2020-02-25 12:26:01
原创 玩轉Reactjs第一篇-構建工程(create-react-app)
一、前言 前期對vue的使用以及源碼做了一些介紹和分析，vue由於其易用易學，性能高等特點，吸引越來越多的前端開發者在使用。作爲前端框架的三劍客之一的Reactjs，得到了facebook社區大力支持，有着豐富的UI框架組件，用
2020-02-25 12:26:01
原创 VUE源碼學習第十三篇-patch(dom更新)
一、總述 前一章節，我們講解了diff算法的原理，本章節一起看下vue如何通過該算法實現patch過程。 還記得在第六篇我們在講到vm._update時，它負責將Vnode轉化爲真實的dom，包含兩個分支過程，dom的首次渲染，以及後續的
2019-07-30 08:34:03
原创 VUE源碼學習第十二篇-patch(diff原理)
一、總述 前面章節介紹了響應式的原理，當監聽的屬性值發生變化，會觸發其相關的訂閱watcher對象更新。如果在模板中使用了該屬性，則會觸發render wacher的更新，最終實現dom的更新。dom更新的有兩種實現方式，一種是"
2019-07-30 08:34:03
原创 VUE源碼學習第十篇--響應式原理(觀察者與發佈器)
一、總述 vue實現了響應式的雙向綁定，相對於傳統的dom操作，我們僅需要關心model的邏輯處理，vue將幫助我們完成view端的映射和渲染，這種模式大大提高了編程的效率。接下來的兩個章節我們將一起了解下vue響應式的實現，在
2019-07-30 08:34:02
13
原创 VUE源碼學習第十一篇--響應式原理(訂閱)
一、總述 前一章節，通過對prop，data所定義的屬性建立觀察類和發佈器，但此時的發佈類Dep中sub空空如也，如何實現watcher的註冊，並在屬性發生變化時，實現更新。本章節將繼續介紹訂閱Watcher。 在介紹前，我們先
2019-07-30 08:34:02
原创 VUE源碼學習第九篇--編譯(generate)
一、總述 經過前面的兩步，將template轉成了AST的模型樹，接下來再將AST模型樹轉成render表達式。在第六章節我們講過，執行render表達式後，生成了vnode。我們用前面的例子看下生成的render表達式的格式。
2019-07-30 08:34:02
原创 VUE源碼學習第八篇--編譯(optimize)
一、總述 上一章節我們講到通過解析將template轉成AST模型樹，接下來繼續對模型樹優化，進行靜態標註。那麼問題來了，什麼是靜態標註？爲什麼要靜態標註。 在源碼的註釋中我們找到了下面這段話： /** * Goal of the o
2019-06-24 09:01:01
原创 VUE源碼學習第七篇--編譯(parse)
一、總述 上一篇我們講到在編譯時掛載過程中，會將template編譯成render表達式，爲後面的形成vnode做準備。 我們來總覽下編譯的過程。 整個過程分爲三個階段： 1、parse，將templat轉成AST模型樹。 2、opti
2019-06-16 11:50:36
3
原创 VUE源碼學習第六篇--new Vue都幹了啥(掛載)
一、總述 如果說前面的幾部分都是準備工作，那麼從掛載開始，就進入了正式的渲染工作，直到頁面呈現出來。在開始分析代碼前，我們可以思考下應該要做哪些工作。 1、將template中的各變量，表達式等替換成實際的值。比如： <div i
2019-06-11 22:47:08
原创 VUE源碼學習第五篇--new Vue都幹了啥(初始化)
一、第三部分：初始化相關功能 我們繼續上一章，第三部分是對各類功能的初始化。這個章節內容較多，大家還需有耐心。 /** *第三部分，初始化相關功能 */ /* istanbul ignore else
2019-04-14 11:40:49
原创 VUE源碼學習第四篇--new Vue都幹了啥（options合併）
一、第一部分：屬性設置 第一部分比較簡單，主要設置vm的兩個屬性。 vm._uid = uid++ 定義了vm唯一標識_uid屬性，每次new Vue都會遞增。 // a flag to avoid this being obser
2019-03-11 04:07:00
原创 VUE源碼學習第三篇--new Vue都幹了啥(概述)
一、總體分析 當我們寫下這段簡單new Vue()代碼，vue框架做了什麼呢? var vm = new Vue({ el:"#app", data:{ msg:'tttt' } }) 會調用s
2019-03-07 16:03:53