原创 你不知道的 requestIdleCallback

本文副標題是 Request Schedule 源碼解析一。在本章中會介紹 requestIdleCallback 的用法以及其缺陷, 接着對 React 團隊對該 api 的 hack 部分的源碼進行剖析。在下一篇中會結合優先級對 Re

2019-03-23 20:55:00

原创 深度理解 React Suspense(附源碼解析)

本文介紹與 Suspense 在三種情景下使用方法，並結合源碼進行相應解析。歡迎關注個人博客。 Code Spliting 在 16.6 版本之前，code-spliting 通常是由第三方庫來完成的，比如 react-loadble(核

2019-03-05 00:04:35 1

原创 React Fiber 數據結構揭祕

此章節會通過兩個 demo 來展示 Stack Reconciler 以及 Fiber Reconciler 的數據結構。 個人博客 首先用代碼表示上圖節點間的關係。比如 a1 節點下有 b1、b2、b3 節點, 就可以把它們間的關係寫

2019-02-23 21:54:29 1

原创 編程範式 —— 函數式編程入門

該系列會有 3 篇文章，分別介紹什麼是函數式編程、剖析函數式編程庫、以及函數式編程在 React 中的應用，歡迎關注我的 blog 命令式編程和聲明式編程 拿泡茶這個事例進行區分命令式編程和聲明式編程 命令式編程 1.燒開水(爲第一人稱)

2019-02-05 13:45:05

原创 React 特性剪輯(版本 16.0 ~ 16.9)

Before you're going to hate it, then you're going to love it. Concurrent Render(貫穿 16) 在 18年的 JSConf Iceland 上, Dan 神提

2018-12-05 22:14:39

原创 React16.x特性剪輯

本文整理了 React 16.x 出現的耳目一新的概念與 api 以及應用場景。 更多 React 系列文章可以訂閱blog 16.0 Fiber 在 16 之前的版本的渲染過程可以想象成一次性潛水 30 米，在這期間做不了其它事情(

2018-11-23 22:38:50

原创 React16.x 特性剪輯(上)

本文整理了 React 16.x 出現的耳目一新的概念與 api 以及應用場景。 更多 React 系列文章可以訂閱blog 16.0 Fiber 在 16 之前的版本的渲染過程可以想象成一次性潛水 30 米，在這期間做不了其它事情(S

2018-11-22 22:28:53

原创 解讀 IoC 框架 InversifyJS

InversityJS 是一個 IoC 框架。IoC(Inversion of Control) 包括依賴注入(Dependency Injection) 和依賴查詢(Dependency Lookup)。 相比於類繼承的方式，控制反轉解

2018-11-07 15:44:40

原创 探尋 JavaScript 精度問題

閱讀完本文可以瞭解到 0.1 + 0.2 爲什麼等於 0.30000000000000004 以及 JavaScript 中最大安全數是如何來的。 十進制小數轉爲二進制小數方法 拿 173.8125 舉例如何將之轉化爲二進制小數。 ①. 針

2018-10-03 15:54:45 3

原创 打包優化實踐(如何Code Spliting)

項目地址: reactSPA 使用 webpack 插件找出佔用空間較大的包 開發環境中可使用 analyze-webpack-plugin 觀察各模塊的佔用情況。以該項目爲例：瀏覽器中輸入 http://localhost:3000/a

2018-09-28 10:14:39 2

原创 從 0 到 1 實現 React 系列 —— 5.PureComponent 實現 && HOC 探幽

本系列文章在實現一個 cpreact 的同時幫助大家理順 React 框架的核心內容(JSX/虛擬DOM/組件/生命週期/diff算法/setState/PureComponent/HOC/...) 項目地址從 0 到 1 實現 React

2018-09-19 16:23:11

原创 從 0 到 1 實現 react - 9.onChange 事件以及受控組件

該系列文章在實現 cpreact 的同時理順 React 框架的核心內容 項目地址 從一個疑問點開始 接上一章 HOC 探索 拋出的問題 ———— react 中的 onChange 事件和原生 DOM 事件中的 onchange 表現

2018-09-18 22:36:58

原创 從 0 到 1 實現 react - onChange 事件以及受控組件

該系列文章在實現 cpreact 的同時理順 React 框架的核心內容 項目地址 從一個疑問點開始 接上一章 HOC 探索 拋出的問題 ———— react 中的 onChange 事件和原生 DOM 事件中的 onchange 表現不一

2018-09-18 18:30:43 1

原创 結合自己造的輪子實踐按需加載

本文提供了按需加載了幾種思路，並給出了相應實踐。原文地址 爲了探究按需加載的本質，選擇了對先前造的輪子 diana 進行實驗。 實驗一：全量引用 import * as _ from 'diana' 打包體積結果如下： 測試的是 d

2018-09-10 22:47:07

原创 探尋 webpack 插件機制

webpack 可謂是讓人欣喜又讓人憂，功能強大但需要一定的學習成本。在探尋 webpack 插件機制前，首先需要了解一件有意思的事情，webpack 插件機制是整個 webpack 工具的骨架，而 webpack 本身也是利用這套插件機

2018-08-30 15:21:04