React 16.8發布了React鉤子:在React組件中可重用和可組合的邏輯
React團隊最近發布了以React Hooks為特色的React16.8。鉤子封裝了不純邏輯(如狀態或效果),具有功能語法,允許鉤子被重用、組合和獨立測試。開發人員還可以通過組合定義自己的鉤子,并使用預定義的Hooks與React16.8一起發運。基于鉤子的React組件允許開發人員構建復雜的React組件樹,這些樹更短,更容易理解。
雖然React Hooks在Face book上得到了廣泛的應用,但這個附帶警告的功能仍然是一些開發人員之間有時會激烈討論的問題。到目前為止,支持純功能方法的替代社區領導的建議并沒有復制React Hooks的一個關鍵好處:為即將到來的React版本啟用并發模式。
構成React應用程序的React組件的很大一部分是實現效果,并與本地和全局狀態交互。不同的組件通常執行類似的有效計算。React Hooks將這些有效的計算打包到函數語法中,這樣它們就可以在React應用程序的框架中重用。React文檔提供了來自聊天應用程序的組件Friend Status的示例,該應用程序顯示一條消息,該消息指示朋友是在線還是離線:
Friend Status使用預定義的use State和useEffect通過JavaScript函數實現其指定的行為。使用狀態公開setter-GetterAPI以訪問它創建的本地狀態。使用Effect對Friend Status的每個呈現都有影響。這種效果是通過運行該效果的函數來指定的,該函數可能初始化任何相關資源,并返回可能釋放不再需要的資源的清理函數。
在React組件樹中,指定的行為將顯示為單個<;Friend Status>;節點。使用通;陬惖男袨閷崿F,通過高階組件重用狀態或效果邏輯將導致這些高階組件潛在地污染組件樹,從而影響到可讀性。另一方面,不重用狀態或效果邏輯容易出現與手動復制相關聯的錯誤類別,可能導致更大的代碼大小,以及相應的次優用戶體驗。
處理16.8艘船只,有10個預定義的掛鉤,以解決具體的有效問題。這些鉤子與React緊密地集成在一起,不會在React類上下文和運行時之外保留任何意義。
預定義的React Hooks可以組成自定義Hooks,這是由開發人員定義的函數,其實現調用預定義的Hooks。React文檔提供了一個聊天消息接收者選擇器Chat Reacce pt Picker的示例,該示例顯示當前選中的朋友是否在線:
Chat Repiece Picker React組件重用use State鉤子和use Friend Status自定義鉤子。前面的示例展示了React Hooks的一個關鍵優勢,這似乎是鉤子的自然組成:捕獲收件人ID的本地狀態可以作為參數傳遞給Friend Status,提供計算當前選定收件人是否在線的預期行為,而不依賴于收件人何時更改。
雖然React Hooks組合在語法上可能與普通JavaScript函數組合相似,但兩者在語義上有著反直覺的不同,Hooks的良好行為受到特定規則的約束:
對Hooks組合行為的管理規則,可能由一個專用的eslint插件執行,對一些開發人員來說是一個挑戰和混亂的根源。一位開發商解釋:
我不習慣需要一個LINTER來告訴我什么時候有效的JavaScript是無效的,因為我碰巧使用了一個特定的庫。在我看來(不過如此),這違背了編程的一些基本原則
其他開發人員熱情地接受了Hooks,并正在建立自己的直覺和推薦的實踐。
作為一種可能的補救措施,React發表了一份詳細的解釋,將組合行為與React Hooks的實施細節聯系起來。然而,引入實現細節來理解語義和建立一個心理模型的必要性可能是阻礙開發人員更大和更快地接受的一個障礙。
React Hooks是新的,隨著與將Hooks集成到React渲染管道相關的錯誤和不一致出現,React團隊正在積極制定常見的陷阱和對抗策略。
React團隊提倡逐步采用策略,并阻止用Hooks重寫現有的基于類的代碼庫。文件評論:
你現在不必學胡克斯。鉤子沒有中斷的變化,我們也沒有從React中刪除類的計劃。(...)我們不建議您在一夜之間重寫現有的應用程序來使用Hooks。相反,嘗試在一些新組件中使用Hooks,并讓我們知道您的想法。使用Hooks的代碼將與使用類的現有代碼并排工作。
一些React開發人員仍在研究具有更好屬性的替代方案,或支持純功能方法。然而,到目前為止,它們都沒有復制React Hooks的一個關鍵好處,即啟用即將到來的React版本并發呈現。Redux和Create React App的合著者Dan Abramov闡述了:
我們希望閉包能夠捕獲我們所呈現的值,并且能夠永遠看到這些值。對于當前值概念并不真正存在的并發模式來說,這是非常重要的。鉤子設計一個組件模型,因為它同時處于許多非碰撞狀態,而不是切換當前狀態(這是什么類模型好)。人們真的不需要考慮這些細節,但他們正在激勵設計。