#React

前言

最近在臉書上的前端社群看到了一篇文章:理解 React useEffect 02,內容是有關於 useEffect 的使用方式,後來在留言串也有了一些討論

其實當初第一眼看到這篇文章的用法,我也是覺得有些奇怪,不過我其實多少能夠理解為什麼是這樣寫,只是還是覺得怪怪的。原本想留言,但是後來覺得「搞不好奇怪的是我」,就想說再思考一下。仔細思考過後,奇怪的還真的是我。

因此這篇來講一下我的想法,有錯的話歡迎在文章底下留言指正,或是在前端社群跟我討論也可以。在繼續閱讀之前,建議先看過上面那篇原文以及原文底下的討論,才會比較進入狀況。

閱讀更多

前言

要學習一個新的東西,光用看的還真的沒什麼用,直接動手下去做才是比較好的方法。因為上一份工作快離職時 React hook 才剛出來,所以我之前從來沒寫過 hook,只有看過一些基本的教學而已。而前陣子開始工作之後,才終於開始寫 function component + hook。

雖然剛開始還是滿懷念 class 的寫法,但寫久之後覺得 hook 也挺不錯的。在使用 hook 的過程中也有碰到一些剛轉換的人常碰到的問題,仔細研究後發現這篇文章要提的案例還滿不錯的,如果能夠理解這個案例,應該就可以掌握到 class 與 function component 根本上的不同,因此寫了這篇來記錄一下心得。

話說如果你已經寫 function component 一陣子,hook 也用得滿習慣的,而且都有把官方文件還有 dan 哥的文章好好看過,基本上不會從這篇文章獲得任何新知識。這篇適合的對象是剛轉換到 function component,而且不太確定跟 class 的差異是什麼的人。

閱讀更多

前言

前陣子有個學生跑來問我一個問題,說他在寫 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

×