Why did you update: 檢測 React 元件是否需要重新渲染的工具

「Why did you update」是一個用來檢測 React 元件是否需要重新渲染的工具。若被判定不需要重新渲染,會 console 出這個元件先前與目前的 props 和 state 資訊和建議,作為開發者調整的依據。

react.js Rendering Performance 效能調校 轉譯效能 前端效能 系列文


Git: 四種將分支與主線同步的方法

四種將分支與主線同步的方法。

git rebase git cherry-pick git merge git


JavaScript:使用 Array.map、Object.values 和 Object.keys 處理一連串的資料

使用 Array.map、Object.values 和 Object.keys 處理「物件中有物件」和「陣列中有物件」的情況。

javascript array functional programming javascript


Git: 拆掉提交變更 - Reset

拆掉提交變更。

git git reset


CSS 的模組化方法:OOCSS、SMACSS、BEM、CSS Modules、CSS in JS

OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 這些規範(或稱心法、解法)存在的目的都是為了讓程式碼易懂、可重用,進而有效率地開發和維護。

CSS Modules CSS in JS BEM styled-components css


Git: Rebase Squash vs Fixup

打指令 git rebase -i 後可進入互動介面,為提交紀錄換順序、編輯訊息或做合併。其中 Squash 和 Fixup 的差異是什麼呢?

git rebase git


Git: Cherry-pick - 選擇某個分支的某些提交記錄

在開發階段的尾聲,準備合併回主線時,老闆說「B、C 功能會在這次上線,A 功能再等等吧」這時候就不是每個 Commit 都需要合併至主線了,而是挑出需要的就好,又為了維護主線的乾淨整齊,合併後只能有一個提交記錄。這要怎麼做呢?

git cherry-pick git Sourcetree