自架網站 Hugo V.S. Medium 的選擇與優缺點紀錄

Keep some notes by deeezyfree

很久沒在 Medium 寫文章了!其實一直都有在紀錄學習心得,有時候用 Notion ,有時候是放在 Hugo Blog 內。 Medium 寫作一直都蠻紓壓的,但在技術文方面還是有一些限制,萌生了出走 Medium 的想法,但不至於放推 Medium,畢竟火車上隨筆或是有感而發可以在 …


此篇為實作練習理解 use 系列概念,學習課程來源 Lidemy React hooks 版本,如有觀念不清楚,再請指正,謝謝。

Table of Contents
1. useEffect
2. useLayoutEffect
3. Custom Hooks

useEffect

  • 每次渲染都有自己的 effect,發生於畫面 render 完成後執行
  • 因 useState 是非同步,不是即時更新,useEffect 可以在 state 改變前後,去做事,更精確說法為清除上次 effect 前做事,執行渲染完成後,此時 為新的state,執行新 effect

總結:每次渲染都會清除上次 effect 後,此過程稱為 clean up function,接下來瀏覽器進行渲染畫面,執行新 effect

useEffect state 狀態改變
useEffect 首次 render 與 unmount
useEffect Counter

useLayoutEffect

先看個圖

圖片來源:https://github.com/donavon/hook-flow

在 Browser paints screen 之前會先執行 Run LayoutEffects

當你程式如下,會先執行 useState 預設值後,再執行 useEffect,因為是先讓畫面渲染後才執行 useEffect,所以會看到畫面閃一下出現『會閃一下後出現的文字』。

會閃一下的程式碼
沒用 useLayoutEffect 會閃一下

如果使用 useLayoutEffect 在畫面 paint 出來前會把 state 狀態完成後才渲染

Custom hooks

把管理不同元件的狀態抽離,讓畫面跟資料流一分為二,乾乾淨淨,因此,其他人可以用你的 hooks 控制相同狀態,但畫面可以設計的完全不一樣。

將 useCounter, useInput, useTitle 拆分出來,這樣後續要維護或修改可以更快找到位置,也可以共用邏輯。

custom hooks
App.js
useCounter.js
useInput
useTitle.js

將自己學習到的實作一遍,避免觀念像是老鼠愛大米,傻傻分不清楚的狀況發生,下一篇再來記錄自己學習 useContext 的過程。

Jamie 2021.08.01


每一年我們站上都會有許多活動,主要的目的不外乎是增加顧客與站上的黏著度,一但黏著度建立後,顧客才會在你的媒體渠道願意接收站上的行銷與促銷的內容,顧客再選擇進站轉換成訂單。

這次的 Line Liff 活動也是建立在公司同事的架構下,開發新的活動機制,這篇會紀錄我學習到的知識與問題解決過程。

接到工作到開發前

我是於 2020/12/10 接到需求,上線日為 2021/1/11,活動時間 1/12 至 1/19。先前的開發摸到顧客的部分,經驗沒其他資深工程師多,沒有活動開發的經驗,跟一般開發時程比較不一樣的點,活動的上線時間是 hard deadline,比較難以變動,對我是一大挑戰,於是我列了一些開發時程如下。

天真的預計開發時程

當拿到這個需求的時候,當然是把前人的程式碼看過一次,然後理解一下架構,知道哪些功能已經有強者幫我做完了,我不用操心,以免不必要的重工。因為整個活動檔案分成三個 repo , line_liff 是前端與後端(顧客登入 line liff 活動頁等邏輯)、還有一個 repo 處理 api 部分(點數是否發完、參與活動細節包含使用者是否參與活動等等狀態)、剩下一個 repo 處理 cronjob (定時配發點數、紀錄活動資料統整、發送推播訊息給使用者),上述這些也是問公司們強者再整理出來的,心裡 OS: 光是啃完強者巨人的肩膀,我還不確定我是不是能成為艾蓮葉卡呢!

開發時遇到痛點

跟需求單位釐清需求後,這次活動需要做一個 Line 連結站上帳號的機制,開發初期都不認為是個很難的問題。因此就決定要把站上登入機制在實作一個頁面出來,利用 bootstrap 完成,並利用打 api 到站上去確認帳號是否登入成功,如登入成功就綁 line。

但後續遇到需求單位調整需求,不用再重刻一個頁面,利用原先已有登入機制就可以,當下心情當然會受影響,不過應該減輕一些畫面的工,畢竟拿現成的,因此開發流程變成要在使用者剛進入頁面時,打 api 看是否已登入活動,但開發時痛點在於,手機上的 application 滑掉後,application cookie 紀錄會消失,可能也是我不熟這塊。

因此我需要利用 mongo 去紀錄使用者 line 資訊並綁在站上 user 上,經過自己一番折騰後,把想法化成下面的圖片,大概就是要確認使用者是否已經參加過此活動、參加過的使用者要撈出活動資訊等等,不畫下來真的會在實作開發時,懷疑人生!


距離上次寫文章記錄學習有五個月之久,經常以太忙、很累去拖延寫文章記錄自己學習的過程,其實我也有用 markdown 去把一些知識去標記,跟 github 串連,這樣就無論在家或是工作都可以去編輯這份筆記,但這份筆記跟學習的輸出,還是有一小段落差。

每天學習都是一種輸入,如果沒有一種方法去定期檢視自己的輸出,會讓自己往後碰到一樣的問題時,仍然會掉入同樣 …


React 生命週期總覽

react lifecycle
  • setState 的 callback 會在週期全部執行完後呼叫,例如 mounting、updating、unmounting

Mounting

  1. constructor(props)
  • super(props) 繼承父層
  • 初始化,組件狀態,定義初始 state 的地方
  • class 寫法不一定要寫他,你也可以直接定義 state 做初始值
  • function binding, …


這次主要是紀錄這次在做公司專案時,寫前後端串連上所踩到的一些地雷,本專案使用 React + Redux-Saga 。
讓我們再次回顧一下這張經典的 Component Lifecycle 吧!

React Lifecycle

這張圖我應該看過不下十次,但每次看還真的每次都有新的觀念刷新我的三觀,這次要講的是 getDerivedStateFromProps ,這個方法沒用過還 …


本次練習是使用 Huli 教材 Lidemy

三月中旬,第一次碰 React ,差點沒被 Component 週期給搞死,其實概念並不難,但是非常哩哩扣扣,以致於楓之島的初心者很容易陣亡,這次的專案是廠商後台,是我第一次用 React 並結合 Page / Provider / API 等觀念,也算是第一次需要用到跨專案拿取資料,導致於我腦袋卡卡,轉不過來。後續完成專案又發現許多 Bug ,大多是我對 API 、Cookie 、內部權限系統不熟悉的關係,經過這次慘痛的經驗也學習到很多稜角。

Demo React 小作品
  1. 首先用 Hooks 定義 State 狀態
  2. 當 ComponentDidMount 時,去取得 API 資料,並把資料載入,因為後續有關注清單要存在 localStorage ,因此一載入就去拿。


時間: 2020/3/2 ~ 2020/3/13

中間穿插了兩個小的需求卡,解決之後,是一個從未碰過的框架 React,早已聽聞很久,原本想說有空假日來學,以免工作遇到,又要花許多時間學習。

擇日不入撞日,莫非定律總是突如其來,這一篇主要會整理自己把 React Component 生命週期與 React Hooks 做一些對照,畢竟自己剛開始常常摸 …


時間: 2020/2/10 ~ 2020/2/21

經歷過這兩個禮拜的經驗後,除了更熟悉 Codeigniter 外,也更了解如何溝通與理解問題。跟以前擔任產品工程師的經驗不同,過去要把終端產品的缺陷紀錄起來,並與製程或是製造工程師去溝通,其產品缺陷的 root cause。

這一次我不再是解決問題的間接人員了,我是解決問題的直接人員!我必須去與 PM …


時間 2020/2/3~ 2020/2 /7

不再是硬生生的工廠味,也不用很趕的吃完早餐進入 Fab ,上班時間是 9:30 am ,比起往常 8:00 有些寬裕,但因為從基隆通勤到南港,因此 7:50 就起床了,一顆心上上下下噗噗通通的跳,看來只有「忐忑」能代表我的心情吧!

在面試時,就已經瞭解公司是扁平化的組織,但經過了人資的公司簡介與部門介紹後, …

J米的學習日記

工業工程畢業,但工作後找不到自己的定位,毅然決然選擇轉職軟體工程師,踏入軟體領域後,發現每個人樂於分享自己的知識,改變我的學習方式,你我都在前進的道路上,互相提攜。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store