介紹Hook - React

介紹Hook. Hook 是React 16.8 中增加的新功能。

它讓你不必寫class 就能使用state 以及其他React 的功能。

import React, { useState } from 'react'; ... Hook是React16.8中增加的新功能。

它讓你不必寫class就能使用state以及其他React的功能。

importReact,{useState}from'react'; functionExample(){ //宣告一個新的state變數，我們稱作為「count」。

const[count,setCount]=useState(0); return(

); } 這個新functionuseState將會是我們學習的第一個「Hook」，不過這只是一個初窺的範例。

如果這現在看起來並不合理，請別擔心！ 你可以開始在下一頁學習Hook。

在這一頁，我們將會繼續解釋為什麼要把Hook加到React以及他們如何幫助你寫出好的應用程式。

注意 React16.8.0是第一個支援Hook的版本。

在升級時，記得不要忘記升級所有的套件包括ReactDOM。

ReactNative則是已從0.59的版本開始支援Hook。

介紹影片 在ReactConf2018，SophieAlpert和DanAbramov介紹了Hook，接著RyanFlorence展示了如何用它們來重構應用程式。

在這裡觀看影片： 沒有BreakingChange 在我們繼續之前，請注意Hook是： 完全自由選擇使用。

你可以在幾個component中試用Hook而不用重寫任何既有的程式碼。

不過如果你不想要，並不需要現在學習或使用Hook。

100%向下相容。

Hook沒有任何breakingchange。

現在即可使用。

隨著v16.8.0發佈，現在即可使用Hook。

目前沒有計畫要從React移除class。

你可以在這個頁面下面的章節閱讀更多跟逐步採用Hook有關的內容。

Hook不會取代你對React概念的了解。

相反的，Hook是對你已經熟悉的React概念：props、state、context、refs以及lifecycle，提供了一個更直接的API。

正如我們稍後將展示的那樣，Hook還提供了一種新的強大方式來組合他們。

如果你只是想要開始學習Hook，可以自由地直接跳到下一頁！你也可以繼續閱讀這一頁來了解更多關於我們為什麼要加入Hook，以及我們如何在不重寫應用程式的情況下開始使用它們。

動機 Hook解決了React中我們過去五年在編寫與維護數萬個component時所遇到的各種看似不相關的問題。

無論你是在學習React、每天使用它、還是更喜歡有著相似component模型的不同函式庫，你可能都會發現其中一些問題。

在Component之間重用Stateful的邏輯很困難 React沒有提供一個方法來把可重用的行為「附加」到一個component上(舉例來說，把它連結到一個store)。

如果你已經使用React一段時間，你或許會熟悉像是renderprops以及higher-ordercomponents，這些試著解決這個問題的模式。

但是這些模式要求你在使用它們時重新架構你的component，這可能很麻煩，而且使程式碼更難追蹤。

如果你在ReactDevTools上查看一個典型的React應用程式，你很可能會發現一個component的「包裝地獄」，被provider、consumer、higher-ordercomponent、renderprops以及其他抽象給層層圍繞。

現在我們可以在DevTools裡把它們過濾掉，不過這指出了一個更根本的問題：React需要一個更好的primitive來共用stateful邏輯。

使用Hook，你可以從component抽取stateful的邏輯，如此一來它就可以獨立地被測試和重複使用。

Hook讓你不需要改變component階層就能重用stateful的邏輯。

這讓在許多component之間共用或是與社群共用Hook很簡單。

我們將會在打造你自己的Hook討論更多相關內容。

複雜的component變得很難理解 我們時常必須維護那些一開始非常簡單，但後來變成充滿無法管理的stateful邏輯和sideeffect的component。

每個lifecycle方法常常包含不相關的邏輯混合在一起。

舉例來說，component可能會在componentDidMount和componentDidUpdate中抓取資料。

但是，同一個componentDidMount方法可能也包含一些設置eventlistener的不相關邏輯，並在componentWillUnmount執行清除它們。

會一起改變且彼此相關的程式碼被拆分，但完全不相關的程式碼卻放在同一個方法裡。

這讓它很容易製造bug和不一致性。

在許多情況下，因為到處都是stateful邏輯，不可能把這些component拆分成更小的component。

而測試它們也很困難。

這是許多人偏愛把React跟一個獨立的state管理函式庫結合的其中一個理由。

然而，這常常引入了太多的抽象，要求你在不同檔案間跳來跳去，而且讓重用component更加困難。

為了解決這個問題，Hook讓你把一個component拆分成更小的function，這基於什麼部分是相關的（像是設置一個subscription或是抓取資料），而不是強制基於lifecycle方法來分拆。

你還可以選擇使用reducer來管理component的內部state，使其更具可預測性。

我們將會在使用EffectHook討論更多相關內容。

Class讓人們和電腦同時感到困惑 除了使重用、組織程式碼更加困難以外，我們發現class可能是學習React的一大障礙。

你必須了解this在JavaScript中如何運作，而這跟它在大部分程式語言中的運作方式非常不同。

你必須記得bind那些eventhandler。

如果沒有ES2022publicclassfields，撰寫的程式碼會非常繁瑣。

人們可以很好的理解props、state以及從上而下的資料流，但仍然在跟class奮鬥。

React中的functioncomponent和classcomponent之間的差異以及什麼時候該使用哪一個，甚至在經驗豐富的React開發者之間也存在意見分歧。

此外，React已經出現了大約五年，而我們想要確保它在下一個五年保持競爭力。

如同Svelte、Angular、Glimmer，以及其他人所展示的，component的提前編譯有很大的未來潛力。

特別是如果它不侷限在模板上。

最近，我們在實驗使用Prepack來做componentfolding，而我們已經看到大有可為的早期結果。

然而，我們發現使用classcomponent會鼓勵一些不是故意的模式，這會讓這些最佳化回到一條比較慢的路。

Class在現在的工具上也有不少問題。

例如，class沒有辦法很好的壓縮，而且它讓hotreload變得脆弱而且不可靠。

我們想要提出一個可以讓程式碼更可能留在可最佳化的路徑上的API。

為了解決這些問題，Hook讓你不需要class就能使用更多React的功能。

從概念上來看，Reactcomponent一直都更接近function。

Hook擁抱function，但沒有犧牲React的實際精神。

Hook提供取用imperative技術的辦法且不要求你學習複雜的functional或reactiveprogramming技術。

範例 Hook總覽是一個開始學習Hook的好地方。

逐步的採用策略 長話短說：目前沒有計畫要從React移除class。

我們知道React的開發者們專注在交付產品，沒有時間仔細去看每一個被釋出的新API。

Hook非常新，所以在考慮學習或採用它們之前，等待更多範例和教學可能會更好。

我們也了解要添加一個新的primitive到React的標準非常高。

我們已經準備了一個詳盡的RFC給好奇的讀者，它藉由更多細節深入探討動機，並針對特定的設計決策以及先關的既有技術提供額外的觀點。

至關重要的是，Hook可以與既有的程式碼一起運作，因此你可以逐步採用它們。

不用急著轉換到Hook。

我們建議避免任何「巨大的改寫」，尤其是那些既有、複雜的classcomponent。

要開始「從Hook的角度思考」需要一些思維上的轉變。

根據我們的經驗，最好先在新的且重要性較低的component中練習使用Hook，並確保團隊中的每個人都不會對它感到不舒服。

在你嘗試了Hook之後，請自由地給我們一些回饋，不管是正面的還是負面的可以。

我們有意讓Hook能涵蓋class所有既有的使用案例，但我們會在可見的未來繼續支援classcomponent。

在Facebook裡，我們有數以萬計的component是用class寫的，而我們絕對沒有計劃要改寫它們。

取而代之，我們開始在新的程式碼中使用Hook並讓它們跟class共存。

常見問題 我們準備了一個Hook的常見問題頁面來回答Hook最常見到的問題。

下一步 看到這頁的最後面，你應該已經大致了解Hook正在解決什麼問題，不過許多細節你可能都還不大清楚。

別擔心！讓我們馬上前往下一頁，我們可以在那裡開始藉由範例學習Hook。

Isthispageuseful?Editthispage安裝開始將React加入到網頁建立全新的React應用程式CDN連結ReleaseChannels主要概念1.HelloWorld2.JSX介紹3.RenderingElement4.Component與Prop5.State和生命週期6.事件處理7.條件Render8.列表與Key9.表單10.提升State11.Compositionvs繼承12.用React思考進階指南無障礙Code-SplittingContext錯誤邊界ForwardingRefsFragmentHigher-OrderComponent整合其他函式庫深入JSX最佳化效能PortalsProfiler沒有ES6的React沒有JSX的ReactReconciliationRefs和DOMRenderProps靜態型別檢查嚴格模式TypecheckingWithPropTypesUncontrolledComponentWebComponentAPI參考ReactReact.ComponentReactDOMReactDOMClientReactDOMServerDOMElementSyntheticEvent測試工具TestRendererJS環境要求術語表Hooks1.Hook介紹2.Hook概觀3.使用StateHook4.使用EffectHook5.Hook的規則6.打造你自己的Hook7.HookAPI參考8.Hook常見問題測試測試概觀測試方法測試環境貢獻如何貢獻Codebase概觀實現說明設計原則FAQAJAX和APIBabel、JSX和構建步驟傳遞Function到ComponentComponentState樣式和CSS檔案結構版本控制政策VirtualDOM和InternalsNextarticleHook概觀