開放 low-level API 帶來更多彈性
官方提供詳細的 low-level API 用法:
- 自定 renderer
- 開放 compiler 使用
沒在用 TypeScript 也可以大概了解它的作用。
TypeScript 在判斷型別的時候是相當嚴謹的。
一般情況下你用 const 來宣告 literal Object 或是 literal Array 的時候,就算你本意沒有要改變它們內容的意思,對 TypeScript 來說它們的型別沒有辦法被推定到接近 enum 那種的定值。
文中用的例子是 HTTP request 的 method,這邊寫精簡一點只留下四大天王:
const HTTPRequestMethod = {
DELETE: "DELETE", // type: string
GET: "GET",
POST: "POST",
PUT: "PUT"
};
// 此動作不會有 type error
HTTPRequestMethod.DELETE = "TIMON"; // type: string
// 正因為可以進行這個操作,
// HTTPRequestMethod.DELETE 才沒有被推定為 "DELETE" type
那麼使用新的 const assertion,就可以達到接近 enum 的效果:
const HTTPRequestMethod = {
DELETE: "DELETE", // type: "DELETE"
GET: "GET",
POST: "POST",
PUT: "PUT"
} as const; // <- 加在這邊
// Error: Cannot assign to 'GET'
// because it is a read-only property.
HTTPRequestMethod.DELETE = "TIMON";
同樣在 literal Array 上也適用,有把 Array 變成 Tuple 的效果:
const ORIGIN = [0, 0] as const;
// 等於 const ORIGIN: readonly [0, 0] = [0, 0]
至於為什麼不乾脆用 enum 就好了?因為 enum 就是 TypeScript 額外帶來的東西,有些工程師會希望雖然寫的是 TypeScript,在可能的範圍還是盡量接近 JavaScript。
實際上 TypeScript 的 enum 在 compile 過後也就是 JavaScript Object 這樣。
var HTTPRequestMethod;
(function (HTTPRequestMethod) {
HTTPRequestMethod["DELETE"] = "DELETE";
HTTPRequestMethod["GET"] = "GET";
HTTPRequestMethod["POST"] = "POST";
HTTPRequestMethod["PUT"] = "PUT";
})(HTTPRequestMethod || (HTTPRequestMethod = {}));
Preact 初心主打做為短小精悍版的 React 其實相當成功,畢竟容量實在省下太多了…
Fast 3kB alternative to React with the same modern API.
React 會這麼大當然是有原因。React 建立了一套自己的 SyntheticEvent 系統,它把瀏覽器的事件系統打包並經過正規化,提供給了 React 及 React 使用者一些彈性。而 Preact 會小是因為它直接使用瀏覽器的 Event 系統,整整少了一大包。
但從一個 React 使用者的角度,Preact 要吸引你過去當然還是要更大的誘因,畢竟 Preact 小包的前提是它能使用的 API 有限,並且不完全與 React 相容。於是,Preact 團隊推出了 preact-compact,做為銜接 React 使用者的橋樑,只要引入它就可以相容幾乎全部的 React 語法與各種現成的 React component。
前言講完了(挖靠講這麼多才講完前言),可以進入正題啦!
其實我一度覺得 Preact 要涼了。
現在 PreactX (版號10.x) 推出就是 Preact 回歸的一劑強心針:
- Fragments
- Hooks
- componentDidCatch
- createContext
然後他們也認清了 Preact 終究是離不開 preact-compact 這個 package,於是直接把它併入 preact package 裡面去了,之後只要 import React from 'preact/compact'; 就可以使用囉!
React 近年的爆炸性發展真的是很難跟上… Preact 真是辛苦你了。但如果每每都需要等 Preact 跟上才能使用 React 新功能的話,我想 Preact 使用者大概會漸漸跳回來吧…
之前我光等 react-apollo 官方支援 hooks 就望眼欲穿了 😫
這是一篇超長的 React vs Svelte 戰文,本文作者是支持 React 那邊的。
他在看完 Svelte 官網跟 Svelte 社群發的文章之後,忍無可忍(?)跳下來開戰。
主因是 Svelte 太愛帶風向了 😆
列舉了兩個帶風向的大分類,作者都用自己的角度給予反擊。這邊我建議大家對 Svlete 跟 React 有些瞭解之後再來詳細看作者的論述。
接著提了 Svelte 隨著時間可能可以解決的弱點:
- TypeScript 支援
- 還不夠成熟,相關 package 太少
最後收尾直接嘴爆:
Despite above described limitations, I think Svelte actually brings up an invaluable idea. Yes, you cannot fully express a modern app through templates without sacrificing flexibility and code reusability.
To be honest, I don’t believe Svelte in its current form can defeat React and conquer the world.
Svelte 風向仔下去~
最後段也有稍微提到一下 code 可讀性的問題,文章作者是 JSX 派的,那麼我想對 Svelte 的不喜歡應該是從一開始就埋在骨子裡了 😎
畢竟他可是愛 JSX 愛到從 Vue 跳到 React 呢!