React 元件生命週期 [筆記]
React 為 component (元件)提供了許多生命週期相關的方法
讓我們可以在 component 輸出前,輸出後,或者被消滅等狀態時,可以藉由這些方法來設計一些行為
Continue Reading
React 為 component (元件)提供了許多生命週期相關的方法
讓我們可以在 component 輸出前,輸出後,或者被消滅等狀態時,可以藉由這些方法來設計一些行為
Continue Reading所謂 Refs 就是官方不建議使用,又非得談的東西
React 典型的數據流是透過 props 在父子 Component (元件) 之間傳遞,
透過更新 props,透過新的 props 來 re-render 子元件
Continue ReadingEvent Loop 是 Javascript 主線程循環處理任務列隊(task queue)事件的運行機制
Javascript 主線程是以單線程的方式設計
在主線程中,包含許多要執行的任務,可以分成同步(synchronous)及非同步(asynchronous)任務,會按照順序處理這些任務
同步的任務比較單純,會遵照上方的規則,在主線程一個一個接續處理
在處理非同步任務時,不會等待非同步結果,就會接續處理後面的任務
例如,我們執行非同步任務,完成發出 ajax (不會等返回結果).., 就會接續處理後面的行程
Javascript 會優先處理主線程的項目,接著才會處理任務列隊(task queue)的項目
並且,讀取任務列隊的行為會不斷的重複,及稱之為 Event Loop
當我們一開始執行非同步任務,或者在後續才觸發的任務,都會被排入任務列隊中
主線程就會不斷地去檢查,並依順序處理這些任務列隊中的項目
Node.js 由javascript建構,也是單線程的設計
圖 by @BusyRich
Node.js 提供了兩個方法 process.nextTick, setImmediate
process.nextTick 可以在主執行線結束之前被執行 (進入下一個Event Loop之前)
setImmediate 可以在目前的任務列隊結束之前被執行
另外,node js 可以透過 Cluster API 來達到多執行緒設計
Continue Reading開發網站需要留意各種解析度尺寸
這裡就整理一些常見的螢幕尺寸,在開發響應式網站 RWD (responsive web design) 時,可以直接拿來參考
液晶螢幕尺寸(吋) 畫面比例 解析度 15 4:3 1024768 17 / 19 5:4 12801024 19 寬螢幕 16:10 1440900 20 4:3 16001200 20 寬螢幕 16:10 16801050 21 4:3 16001200 21 寬螢幕 16:10 16801050 22 寬螢幕 16:10 16801050 23 4:3 16001200 24 寬螢幕 16:10 19201280
15吋————–原生解析度為1024768,畫面為4:3 17吋與19吋—原生解析度為12801024,畫面為5:4 19吋寬———–原生解析度為1440900,畫面為16:10 20吋————–原生解析度為16001200,畫面為4:3 20吋寬螢幕—–原生解析度為16801050,畫面為16:10 21吋————–原生解析度為16001200,畫面為4:3 21吋寬螢幕—–原生解析度為16801050,畫面為16:10 22吋寬螢幕—–原生解析度為16801050,畫面為16:10 23吋————–原生解析度為16001200,畫面為4:3 24吋寬螢幕—–原生解析度為19201280,畫面為16:10 27吋寬螢幕—–原生解析度為19201280,畫面為16:10 30吋寬螢幕—–原生解析度為25601600,畫面為16:10
Continue ReadingPreact 是一個輕量級的框架(又一個坑),大小僅3kb Preact 類似 React API 及模式,可使用 ES6 Class及Function Component
上面提到,可以透過 preact-cli 來快速建立 Preact Progressive Web App 專案 下面會介紹其特點、安裝及基本使用方式
Continue ReadingReact Static 是一個漸進式靜態網站生成工具,也是一個在server端渲染React 應用架構的框架,輕量且強大的架構可以滿足 SEO,完善的網站效能及兼顧使用者/開發者的體驗。
Continue Reading通常我們需要使用到 Icons 時,都會前往常用的一些 Icon 網站取得相關工具包檔案
現在,在React Native Vector Icons 就一次幫你整合市面上常用的 Icon 類型,容易使用及修改
可以讓我們更簡單就能使用,真的非常方便
Continue Reading一般網頁設計中,我們會使用到 console.log 在 Chrome Developer Tools輸出一些字串, 並且可以在右邊看到這個console.log的位置
如果想隱藏 log 的來源行數 讓其他用戶在 Chrome Developer Tools 無法得知程式的位置,該怎麼做呢?
Continue ReadingSet 是一個ES6新的資料結構
像是陣列一樣,可以用來存取值
Set會自動處理掉重複值,並且Set沒有Key,輸出時只會有value (key value都會相同)
只要用 new Set() 將陣列帶入,就可以進行 set 來格式化。
可以透過定義一個陣列,及搭配Spread Operator 來取得Set 結構值 […MySet]
Set 有一些方法可以使用 添加值、刪除值、清空值、判斷值是否存在、回傳內容長度
我們可以用 Set 來對多筆資料(array)來進行集合
集合包括 聯集 new Set([…mySet, …mySet2]) 取得整體數據
交集 new Set([…mySet].filter(v => mySet2.has(v))) 取得共同數據
A減B差集 new Set([…mySet].filter(v => !mySet2.has(v))) 取得A扣除B關聯的部分
Continue ReadingSpread Operator(展開運算符) 與 Rest Operator (其餘運算符)
這兩種特性原則上及寫法都一樣,
但特徵不同,所以使用情境不同
把一個陣列展開(expand)成個別值 (這裡陣列也可以用其他iterable的物件,包括: String、Array、Map、Set..等)
收集其餘的值,轉變成一個陣列
定義函式時,在傳入參數欄位使用一個 Rest Operator, 就能一次取得多個 a,b,c,d,e 傳入值,並轉為陣列格式來使用
Continue ReadingPromise 已經被ES6及新的瀏覽器支援,是一個強大的異步執行流程語法結構
Promise 可以讓我們確保某件事情做完之後,才進行後續動作
本質上都是使用callback(回呼函式),並且都是async(異步執行)
當我們實際執行一個 promise,他會先將狀態切換為 pending(等待中),並且依照 resolve 或reject 來返回結果
我們可以透過 Promise 來進行 then..catch 連續的連鎖流程處理
promise.all 可以用陣列的方式一次帶入多個promise,
執行到最後會再回傳一個 Promise 物件
有幾點特色:
promise.race 同樣可用陣列的方式一次帶入多個promise,
只要有任何一個值完成,無論是resolve, reject 還是錯誤,都會返回結果
如果傳入的 promise 同時完成,只會返回排陣列在第一位置的 promise 值
Continue ReadingES6 Arrows Function 和 Normal Function 差別
Arrow Function 主要有以下優勢:
在使用內部函式時,內部函式有自己的this,通常會指向最外部 windows 物件,
因此,通常要先用變數指定this,傳到內部函式使用,
而 Arrow function 則不必再透過變數就能直接使用外部函式的this作為自己的this
在物件裡的屬性,必須使用function,而不能使用 Arrows function
箭頭函式不能當作generators使用,使用yield會產生錯誤。
Continue Reading當我們宣告且呼叫一個函式時,函式本身會形成一個 scope,scope 裡面會包含 Closure
Closure 原則就是,是一個可以用 by Reference 的方式紀錄函式建立時的環境,包括了:
Closure 內部所建立的變數,限定於內部使用,
在Closure 裡也可以存取到 Scope chain 中的所有變數,
Continue ReadingJavascript 最難理解的源頭,始於 function
https://pjchender.blogspot.tw/2016/03/javascriptfunctionobjects.html First Class Functions(一級函式)的概念,是指其他類型(Objects, String, Boolean, Numbers)做的事, Function都能做,包括將Function指定成一個變數等等 (assign them to variables, pass them around, create them on the fly)。
function只是一種特殊的物件,它可以被當作物件來使用
所有函式都是物件中的"方法"
function 本身有幾個scope(作用域):
React 是一個 View 框架,主要的用途有幾個:
在開始之前,請預先安裝 webpack + babel + react依賴環境
接下來,會一步步來說明:
Continue ReadingWebpack 是一個 module 整合工具,用來將javascript 打包成一支讓瀏覽器能夠運行的 bundle.js。
看似簡單,但其實功能非常強大
webpack 的功能:
此外,還有一些 plugin 可以使用
例如 common-chunks-webpack-plugin - 可以將一些要再多地方共享的模組拆分成獨立的 bundle extract-text-webpack-plugin - 可以將 bundle 中的 CSS 另外存成一支 app.bundle.css html-webpack-plugin - 可用來動態產生HTML內容,並且會自動將打包過的js整合再一起 i18n-webpack-plugin - 可製作多國語系 compression-webpack-plugin - 壓縮內容
Continue Reading本文是依據 Babel 官網及網路參考資料逐步學習記錄的內容
Babel 這個壞男孩(發音似 Bad boy) 喜歡追求新潮的東西,同時內心是個文青,熱愛老東西。所以,當他接觸到新的內容,就會想盡辦法與舊事物融合~ 只能說個性實在完美
每當有新的javascript語法(例如ES2015-ECMAScript 6)出現,都只能靜待瀏覽器支援才能決定是否採取行動。 為了解決這樣的痛點,Babel就出現了。
Continue Reading