Categories
程式開發

React Hooks 還不如類?


本文最初發佈於Medium網站,經原作者授權由InfoQ中文站翻譯並分享。

在這篇文章中,作者按照官方文檔的描述,分析用React Hooks 代替類的動機,一如標題所示,作者並不是很喜歡這一特性。

動機1:類令人困惑

我們發現,類可能是學習React道路上的一大障礙。你必須了解this在JavaScript中的工作機制,這和大多數語言中的機制截然不同。你必須記得綁定事件處理程序。沒有不穩定的語法提案,代碼就非常冗長,React中函數和類組件之間的區別,以及何時該使用哪一個的話題,即便在經驗豐富的React開發人員之間也存在分歧。

好的,我同意當你剛開始使用Javascript時,this可能會有些令人頭疼,但是箭頭函數解決了這種困惑;而且調用一個Typescript已經開箱支持的階段3特性都被稱作是“不穩定的語法提案”,這就純粹是聳人聽聞。 React團隊指的是類字段語法,這種語法已經被廣泛使用並且可能很快就會得到正式支持:

class Foo extends React.Component {
  onPress = () => {
    console.log(this.props.someProp);
  }
  render() {
    return 

如你所見,使用類字段箭頭函數時,你無需在構造函數中綁定任何內容,並且this始終指向正確的上下文。

如果類是令人困惑的,那麼新的hooked函數又能強到哪兒去呢?一個hooked函數並不是一個常規函數,因為它具有狀態,有一個看上去很奇怪的this(也就是useRef),並且可以具有多個實例。但它絕對不是類,而是介於兩者之間,後文我都會叫它娛樂類。那麼,對於人類和機器而言,那些Funclass理解起來會更容易嗎?機器這邊我不確定,但我真的不認為Funclass從概念上來講比類更容易理解。類是一個廣為人知且經過深思熟慮的概念,每位開發人員都熟悉this的概念,就算在javascript中有所不同也不是大事。相比之下,Funclass是一個新概念,一個很奇怪的概念。它們更像是魔法,而且過多地依賴約定而不是嚴格的語法。你必須遵循一些嚴格而怪異的規則,需要注意代碼放置的位置,並且這裡面存在許多陷阱。我不能將一個hook放在一個if語句中,因為hooks的內部機制是基於調用順序的,這簡直太瘋狂了!這種事情更像是半吊子的POC庫會做出來的,而不是像React這樣的知名庫中應該做的。而且我們還要準備好接受一些可怕的名稱,例如useRef(this的一個花哨的叫法)、useEffect、useMemo、useImperativeHandle(這啥?)等等。

原文鏈接:【https://www.infoq.cn/article/ltgmCtDsuts31qM1W20D】。未經作者許可,禁止轉載。