發表於 | 分類於 |

前言

去年開始用 React 開發，對於效能上跟畫面 render 的速度其實一直沒有搞得很清楚，也不知道該如何去觀察，最近因為專案的開發，面對巨量的資料，發生了效能的問題，發現有這個工具可以來監測究竟頁面上每個 component 的 render 花了多少時間。
整理一下從 React 官網對於 React Profiler 的說明跟用法。
官網的頁面跟現行的相比在圖片顯示上有點不一樣，不過大致上都還是差不多的。

安裝

前往 google chrome extension 商店，搜尋並安裝 React Developer Tools。在 dev 環境下打開開發者工具就可以看到多了

閱讀全文 »

發表於 |

前言

在開始開發之前，要先把環境先設定好，而每換一個工作環境就要重新安裝一遍。把它記錄下來，以後每次換環境都可以無痛設定了。
這裡介紹的都是在 OS X 開發環境的建立。並沒有歧視其他系統的開發者，只是因為筆者我目前使用的是 OS X 系統。
以下是會安裝到的東西：

發表於 | 分類於 |

前言

繼續之前 ES6 - Promise(1)，繼續來研究 Promise，今天要來研究的是 Promise 的 then 方法。

語法

then 方法回傳一個 Promise。它接收兩個參數： Promise 在成功及失敗情況時的回呼函式。

1
2
3
4
5
6
7
p.then(onFulfilled[, onRejected]);

p.then(function(value) {
  // fulfillment
}, function(reason) {
  // rejection
});

閱讀全文 »

發表於 | 分類於 |

三十天的 javascript 挑戰，終於完成了～(撒花)
透過 Wesbos 的 30 篇 javascript 教學，真的學到了很多新的技術，對於 javascript 也更加熟練。
GitHub 連結
剛接觸前端的時候，覺得 jQuery 怎麼那麼好用，反而變得不太會寫 vanilla javascript。
透過這三十個不同主題的練習，發現其實不用 jQuery 或其他 libraries 也可以寫出很多的應用，開始習慣不要依靠像 jQuery 的函式庫 (當然它還是有它的好～)
雖然把 30 篇都完成了，但是很多章節的東西都只有先簡略地寫在程式註解裡，再找時間一篇一篇整理出來。

發表於 | 分類於 |

接續上一篇的 iterator，來看看 generators 到底是什麼？

Generator function (function*)

1
2
3
function* name([param[, param[, ... param]]]) {
   statements
}
閱讀全文 »

發表於 | 分類於 |

在弄清楚它是什麼之前，不知道它到底可以幹嘛用。
弄清楚之後才恍然大悟，原來它真的蠻好用！

基礎用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); //{c: 30, d: 40}
閱讀全文 »

發表於 | 分類於 |

前言

Promise 是 ES6 當中用來解決 christmas callback hell 的一種非同步的處理方式。

Promise 的三種狀態

  • Pending: 初始狀態
  • Fulfill: 成功完成
  • Result: 失敗

Promise 的狀態都是從 pending 開始，一旦 Promise 的狀態被確定(fulfill or result)，就不會再改變。

閱讀全文 »