圖片來源: 

React

React現在有一個名為Hooks的新功能提案,可以讓開發者在不撰寫類別(Class)的情況下,使用狀態和其他React的功能,但官方強調,現在並沒有任何刪除類別的計畫,開發者不需要急著學習Hooks,而且Hooks也完全向後相容。有興趣的開發者可以在React v16.7.0-alpha找到Hooks功能,現在社群也在開放RFC熱烈討論中,官方預計順利將會在React v16.7中加入Hooks。

由於React沒有提供附加(Attach)可重複使用行為到元件上的方法,進階的使用者會在熟悉渲染工具或是高階元件等模式,嘗試解決這個問題,但是這些模式會要求開發者在使用的時候重構元件,這個過程可能很麻煩又或是讓程式變得難以遵循。

在React DevTools中典型的應用程式,通常可以找到被戲稱為包裝器地獄的元件,包含著像是提供者、消費者、高階元件、渲染工具以及其他抽象等各層,雖然可以在DevTools中以過濾器過濾掉這類元件,但官方表示,這也指出了更基本的問題,React顯然需要一個更好的原語(Primitive)來共享狀態邏輯。

而Hooks便是來填補這個功能上的空缺,開發者可以從元件中提取狀態邏輯,以便可以獨立測試並重複使用,Hooks允許開發者可以在不更改元件層次結構的情況下重用狀態邏輯,如此便能更輕鬆的在許多元件或社群間分享Hooks。

元件從簡單發展到複雜,不少會發生難以管理的狀態邏輯災難以及其他缺陷,每個生命週期的方法通常混合了不相關的邏輯,像是元件可能會在componentDidMount和componentDidUpdate中,提取一些資料,但是相同的componentDidMount方法,可能還包含一些設置事件監聽器等不相關的邏輯,並在componentWillUnmount中執行清理。不相關的功能被組合在同一個方法中,將容易產生錯誤以及不一致的情況。

在許多情況下, 這些元件難以被分解成更小的元件,由於狀態邏輯遍佈在各處,也讓測試變得困難,而這也是不少開發者更喜歡將React和單獨的狀態管理庫結合的原因,但是如此又常會引入太多的抽象,讓開發者需要在不同檔案中跳轉,使重用元件變得困難。

Hooks允許開發者根據相關的部分,像是設置訂閱或是獲取資料等功能,將一個元件拆分成較小的函式,而不是基於生命週期方法強制拆分,另外,開發者也可以選擇使用Reducer管理元件的本機狀態,使其更具可預測性。

官方提到,在他們的觀察中,類別是初學者在學習React中最大的障礙,必須了解Class在JavaScript中運作的方式,而這部分與大多數語言有很大的不同,開發者通常能夠很好地理解工具、狀態以及資料流,但是卻很常在類別中卡住,即便是在經驗豐富的開發者間,也會對React的函式和類別元件間的使用區別存在分歧。

Svelte、Angular和Glimmer等框架展現了元件AOT編譯的潛力,React也想在這部分跟進,最近官方開始嘗試使用Prepack進行元件折疊(Component Folding),初始階段獲得很不錯的結果,但同時也發現,類別元件可能導致最佳化的障礙,而在現今的工具上,類別也很難被良好的縮小,並使熱重載不可靠。

Hooks提供開發者在沒有類別的情況下,使用更多的React功能,從概念上來說,React元件更接近函式,Hooks能擁抱函式卻又不犧牲React的實際精神。即便類別存在這麼多問題,但官方強調,打算讓Hooks能夠涵蓋所有類別使用案例,但目前並沒有任何要刪除React類別的計畫。

開發者不需要現在就學習Hooks的使用方式,Hooks與既存程式碼可以共同工作,開發者可以選擇逐步採用。要在React增加原語的門檻很高,官方現在透過釋出實驗性的API,來獲取社群中的回饋,有興趣的開發者也可以從官方準備的RFC中獲得更多的資訊。

熱門新聞

Advertisement