React

前言

前陣子有個學生跑來問我一個問題,說他在寫 React 的時候分不清楚 keyPress 與 keyDown 這兩個事件,還有 keyCode 跟 charCode 這兩個東西,有時候拿得到值,有時候卻拿不到,覺得十分困惑。

我原本以為是 React 做了一些處理,所以去看了一下原始碼。後來發現 React 的確有做一些處理,但實際上這個問題跟 React 沒什麼關係,而是 keyPress 跟 keyDown 這兩個原生的 JavaScript 事件本來就有差異。

所以他碰到的問題跟 React 一點關係都沒有,只是對這部分的事件機制不熟而已。

儘管如此,能夠藉由一個實際的問題來參考一下 React 的實作還是件很不錯的事,而且 React 的註解寫得很好。

因此,這篇會先帶大家來看這兩個事件的不同,最後再來看 React 裡面怎麼做一些處理。

閱讀更多

前言

雖然說從以前就一直聽到 React 要把內部的 reconciler 換成一個叫做 Fiber 的東西,但從沒仔細研究過,也不知道這樣子的改變會對上層造成什麼影響。

真正開始比較深入理解,是在某一次使用 Redux Form 時踩到一個相關的 bug,才知道 React 自從正式改用 Fiber 之後,其實對上層也有一些改變。

這篇的標題「淺談」不是騙你的,這篇真的很淺,我不會談到 Fiber 底層的運作(因為我也還沒認真研究過),只會用白話文跟你說 Fiber 大概是怎樣,是為了解決什麼樣子的問題而誕生。

閱讀更多

前陣子正在重構公司的專案,試了一些東西之後發現自己對於 React 的渲染機制其實不太了解,不太知道 render 什麼時候會被觸發。而後來我發現不只我這樣,其實還有滿多人對這整個機制不太熟悉,因此決定寫這篇來分享自己的心得。

其實不知道怎麼優化倒還好,更慘的事情是你自以為在優化,其實卻在拖慢效能,而根本的原因就是對 React 的整個機制還不夠熟。被「優化」過的 component 反而還變慢了!這個就嚴重了。

因此,這篇文章會涵蓋到下面幾個主題:

  1. Component 跟 PureComponent 的差異
  2. shouldComponentUpdate 的作用
  3. React 的渲染機制
  4. 為什麼要用 Immutable data structures

為了判別你到底對以上這些理解多少,我們馬上進行幾個小測驗!有些有陷阱,請睜大眼睛看清楚啦!

閱讀更多

之前寫了一篇文章簡單的筆記一下自己在看redux的心得,在這邊還是要再次推薦官方文件,因為寫的超級清楚。

但是之前在看官方文件的時候,middleware的地方沒有完全看懂,看到後面就霧煞煞了
這次重看了一遍官方文件講middleware跟非同步操作的地方,邊看邊做筆記,總算是把middleware的實作原理弄懂了
依照慣例分享一下心得
官方文件(中譯版,但是還沒翻譯到這篇)

官方文件很棒的點就是這篇不只教你怎麼用,還從頭講起,讓你知道為什麼middleware會是現在這樣的形式。

閱讀更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×