React將加入新功能Hooks取代類別

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中獲得更多的資訊。