Skip to main content

到底React Hooks有何特別(二)?淺談useEffect及useReducer

· 6 min read
戈頓
Developer & Co-founder of Tecky Academy

於本篇文章的上集,我們討論了useState如何令Stateful React component簡化良多,此篇主要討論的是如何使 用useEffectuseEffect可以簡化stateful logic,很多人都提到 React Hooks 有可能可以完全取代Redux作為 React State Management的標準,正因如此。

重溫

上集提到,使用useState可以將原本class based component變成簡單的 functional component

class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
};
this.incrementCounter = this.incrementCounter.bind(this);
}
incrementCounter() {
this.setState((state) => ({
counter: state.counter + 1,
}));
}
render() {
return (
<h1 onClick={this.incrementCounter}>
Hello, {this.props.name}
{this.state.counter} times
</h1>
);
}
}

變成

function Welcome(props) {
const [counter, setCounter] = useState(0);
return (
<h1 onClick={() => setCounter((counter) => counter + 1)}>
Hello, {props.name}
{counter} times
</h1>
);
}

到底React Hooks有何特別?

· 5 min read
戈頓
Developer & Co-founder of Tecky Academy

新近推出的React 16.7包括一個很有趣的功能,名字叫做React Hooks。看到這個名字,很多人會下意識認為是在講 componentDidMount, componentDidUpdate等方法。但其實這些方法正名是 React Lifecycle Method,推出React Hooks是為了方便開發者多用functional component,但仍然能夠使用stateprops等重要功能。

React簡介

如果你只對平常的Web Programming有認識,而未曾使用過React 的話,首先需要理解React的特別之處: 與Dom Manipulation不同,以React開發前端軟件要以component作為基本單位去思考。以下是一個 React Component的例子:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

Data Science? AI ? Machine Learning? 到底有何分別?

· 6 min read
戈頓
Developer & Co-founder of Tecky Academy

近幾年大家經常聽到 Data Science(數據科學)、AI(人工智能)、Machine Learning(機器學習)、 Deep Learning(深度學習)等等詞彙, 以上的名詞的意思好像差不多,但又並非完全一樣:例如曾見過 Data Science and Machine Learning 一詞,難道Machine Learning 跟Data Science 不是一樣嗎? Alpha Go到底是運用AI 還是 Deep Learning ?定還是Machine Learning 呢? 相信大家都感到頭昏腦漲,本篇想釐清的,正是以上幾個常用的科技詞彙。

Data Science Comparison

破除迷思系列:高手一定唔用Windows ?

· 4 min read
戈頓
Developer & Co-founder of Tecky Academy

早一排有朋友想學寫程式,他忽然問我:「我要買一部Mac 機嗎?」,開始的時候我也不太理解原因,後來細問之下,才知道朋友覺得通常看Youtube時,片中的Programmer都愛用Mac,一些 Coding Bootcamp 甚至乎非Mac 不教。因此他認為一個高手必用Mac ,只有對電腦不熟的人才會用Windows。

Mac vs Windows

http://blog.nerdalert.com/windows-10-vs-mac-os-sierra/

破除迷思系列:Programmer 做到三十歲就要轉行?

· 5 min read
戈頓
Developer & Co-founder of Tecky Academy

以下是一個典型的IT人悲歌故事: Peter 是一個PHP programmer ,自從大學電腦科學系畢業開始,就在一間小公司一直寫程式寫了八年,Peter工作表現算是不錯,可是近來有一個剛畢業的Programmer 加入了公司,那位新人總是想跟Peter 建議可以使用VueJS作為前端開發。Peter 不理解,不耐煩的對新人道:「用HTML + JQuery就可以啦!搞咁多野做乜!」。幾個月後公司決定全面revamp system,前端將會以VueJS來做,由於Peter 對現代前端開發一竅不通,很快公司就決定解僱了Peter。

有人看到這些故事,結論就是Programmer 做到30歲就好,要盡快升遷到不用再寫Code的位置,才會穩妥,不然一遇上經濟轉差,就會面臨裁員的可能性。其實不只香港,外國亦有人有類似看法,彷彿三十歲是一條無形死線。過了三十歲,還在前線寫Code,未來就會一片暗淡無光。

30 Years Old

https://www.businessinsider.com/software-developers-fear-age-30-2014-3

破除迷思系列:用Command Line 的都是Hacker?

· 6 min read
戈頓
Developer & Co-founder of Tecky Academy

大家如果有Programmer 的朋友,你應該早就發現他們使用的軟件與平常電腦使用者很不同,其中最引人注目的就是一個黑底淺色字、無任何圖案的軟件,而你的Programmer 朋友在上面飛速打字,然後密密麻麻的文字就慢慢向上褪出螢幕,大家總會忍唔住補上一句:「嘩!好似Matrix啊!」 或者「你係Hacker嚟架?」

Matrix

https://www.indiewire.com/2017/10/the-matrix-code-digital-rain-meaning-1201891684/

這個軟件其實是Command Line Interface(命令列介面),,簡稱CLI。大家常用的界面是Graphical User Interface(圖形使用者介面),簡稱GUI。問題來了,為何時至2018年,在touchscreen都已經廣為使用的年代,programmers 還會使用CLI呢?

學術探討系列:型別推論(一) Type inference(I)

· 4 min read
戈頓
Developer & Co-founder of Tecky Academy

本篇是學術探討系列的第一篇,與先前不同的是內容上會以純粹學術角度集中探討一些題目,打響頭炮的將會是關於型別推論(Type inference)。歡迎大家留言建議一些題目啊。

靜態x型別 vs 動態型別

在Programming 的世界,自古以來已有兩大陣營:靜態型別(Static Typing) 及 動態型別( Dynamic Typing),以下將會簡稱為Static 及Dynamic。Static 的歷史較久,由 Fortran 至 Cobol 、C 至 C++ 、 C# 至 Java ,都是Static 陣營的中流柢柱。Dynamic 陣營在八九十年代開始變得受歡迎,亦由於簡單易學成為初學者的最愛,最受歡迎的 Javascript 、Python 、PHP 皆是Dynamic 陣營的代表 。

Dynamic vs Static

圖片來源:https://blogs.agilefaqs.com/

如何分辨Static 跟 Dynamic 陣營呢? 其實Static 跟Dynamic 所描術的是變數的type。

破除迷思系列:Programming language 有高下?Java 、PHP 無人再用?

· 3 min read
戈頓
Developer & Co-founder of Tecky Academy

久不久在Programming 的社群內、討論區內,總有同行大聲疾呼:「Java 已死!」或是「PHP 已死!」一類的講法,總令想學習這類「悶蛋」語言的朋友望而卻步,怕投入了時間精力,最終卻無用武之地。

這個講法往往的根據都在於有其他更好的Programming language 可以使用,所以Java、PHP這類程式語言將會被逐步淘汰,直至完全無人問津。然而,迄今為止其實世界上據統計有多於2000種程式語言,與人類語言的總數相比亦不遑多讓。

RedMonk每年都會統計programming language 的受歡迎程度,亦會在網站上發佈,以下是2018年六月最新發表的統計

programming ranking

Y軸是該程式語言在programmer 最愛的Stackoverflow 上面的tag總數

X軸是該程式語言在Github上的總 Project 數

破除迷思系列:Programming = Computer Science?

· 4 min read
戈頓
Developer & Co-founder of Tecky Academy

一個大家經常會問到Tecky Academy的問題是,我們程式設計微學位課程跟大學的電腦科學學位有甚麼不同?為何大學要讀四年,Tecky卻是在三個月完成? 其實,歸根究柢原因是大學教的是電腦科學(Computer Science)Tecky教的是程式設計(Programming)

Programming vs ComputerScience

Computer Science vs Programming

國泰資料外洩其實有咩implications?

· 6 min read
戈頓
Developer & Co-founder of Tecky Academy

國泰乘客資料外洩,洩漏咗940萬位乘客資料,令全城嘩然。市民大眾對一件大事過咗咁耐先公佈感到好憤怒同不可思議。政府個人資料私隱專員公署就只係講咗話難以接受,同乘客期望有落差云云。更有議員話係因為炒得太多IT 人,所以造成無人24小時監察住個網絡情況,令到被人攻擊之類。

Cathy

圖片來源:國泰航空

但係喺眾多嘅討論之中,有一個重點往往被忽略:就係點解測試要用真實乘客嘅數據 ?