hooks

學習如何使用 Hooks 建立 React 應用程式 Hooks 是在 React 16.7 中引入的功能，它將改變我們未來編寫 React 應用程式的方式。 在出現 Hooks 之前，某些關鍵的功能只能在類別組件中實現：擁有自己的狀態和使用生命週期事件。輕巧靈活的函式組件在功能上受到了限制。 Hooks 允許函式組件擁有狀態並響應生命週期事件，並且幾乎使類別組件過時。它們還允許函式組件以良好的方式處理事件。 存取狀態 使用 useState() API，您可以創建一個新的狀態變量並對其進行更改。useState() 接受狀態項目的初始值並返回包含狀態變量和修改狀態的函數的陣列。由於它返回的是一個陣列，我們使用陣列解構來訪問每個單獨的項目，就像這樣：const [count, setCount] = useState(0)。 以下是一個實際示例： import { useState } from 'react' const Counter = () => { const [count, setCount] = useState(0) return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ) } ReactDOM.render(<Counter />, document.getElementById('app')) 您可以添加任意多個 useState() 調用，以創建任意多個狀態變量。只需確保在組件的頂層調用它（不在 if 或其他塊中）。 Codepen 上的示例：...

了解React生命周期事件及如何使用它們。 React類組件可以綁定幾個生命周期事件。 鉤子（Hooks）也允許函數組件以不同的方式訪問它們。 在組件的生命周期中，有一系列的事件被調用，你可以在每個事件上添加自定義功能。 在哪個生命周期事件上添加哪個鉤子是我們接下來要研究的內容。 首先，React組件的生命周期有3個階段： 加載 更新 卸載 讓我們詳細看一下這3個階段以及每個階段調用的方法。 加載 在加載時，在組件被加載到DOM之前，有4個生命周期方法：constructor、getDerivedStateFromProps、render和componentDidMount。 constructor constructor是組件加載時第一個呼叫的方法。 通常你使用constructor來設置初始狀態，使用this.state = ...。 getDerivedStateFromProps() 當狀態依賴於屬性時，可以使用getDerivedStateFromProps根據屬性值更新狀態。 它在React 16.3中添加，旨在代替被棄用的componentWillReceiveProps方法。 在這個方法中，你沒有訪問this，因為它是一個靜態方法。 它是一個純方法，所以它不應該引起副作用，並且在使用相同輸入多次呼叫時應該返回相同的輸出。 返回帶有更新後的狀態元素的對象（如果狀態未更改則為null） render() 從render()方法中，你返回構建該組件界面的JSX。 它是一個純方法，所以它不應該引起副作用，並且在使用相同輸入多次呼叫時應該返回相同的輸出。 componentDidMount() 這個方法是用於執行API調用或在DOM上進行操作的地方。 更新 當更新時，在組件被加載到DOM之前，有5個生命周期方法：getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate和componentDidUpdate。 getDerivedStateFromProps() 參見上述描述。 shouldComponentUpdate() 此方法返回一個布林值，true或false。你使用這個方法告訴React是否應該繼續重新渲染，默認為true。在重新渲染的成本較高且你希望更控制何時發生重新渲染時，你會返回false。 render() 參見上述描述。 getSnapshotBeforeUpdate() 在這個方法中，你可以訪問上一次渲染和當前渲染的props和state。 它的使用案例非常特殊，可能是你使用最少的一個。 componentDidUpdate() 此方法在組件在DOM中更新後呼叫。使用它來運行任何第三方DOM API或在DOM更改時必須更新的API。 它對應於加載階段的componentDidMount()方法。 卸載 在此階段，我們只有一個方法，componentWillUnmount。 componentWillUnmount() 當組件從DOM中被刪除時，調用此方法。使用它來執行任何所需的清理工作。 舊版 如果你正在開發一個使用了componentWillMount、componentWillReceiveProps或componentWillUpdate的應用程序，這些方法在React 16.3中已被棄用，你應該遷移到其他生命周期方法。

不行。 我不知道具體的技術原因，但是這是不可能的。 我在使用SWR和特別是useSWR hook時碰到了這個問題。 const ({ data } = useSWR(`/api/user`, fetcher) 我想在使用者登錄時只從API中檢索一些數據，並且我想“好的，我可以這樣做”: let data if (loggedIn) { ;({ data } = useSWR(`/api/user`, fetcher) } 但是..不行。 React會在控制台中報錯，可能會顯示如下的錯誤訊息： 警告: React檢測到Hooks調用的順序在Course中發生了變化。如果不修正，這將導致錯誤和bug。 解決方案取決於使用的hook。在這種情況下，useSWR hook提供了一個非常快速和高效的解決方案，因為我可以將API端點替換為null以避免加載數據： const ({ data } = useSWR(loggedIn ? `/api/user` : null, fetcher) 我將條件語句放在應用hook的內部，這使它對我起作用了。

了解 useReducer React Hook 的用途以及如何使用它！ 自從 React 引入了 hooks 以來，我在幾個專案中都使用過它們，它們真的很強大。 移除所有基於 class 的組件，讓代碼更像是真正的 JavaScript。而且函數組件終於可以管理狀態了。 如果你對 hooks 還不熟悉，請先看看我的React hooks介紹。 我有時會使用到的一個 Hook 是 useReducer。 import React, { useReducer } from 'react' 這個 Hook 用於管理狀態，類似於 useState，但更複雜。 這就是 useState 和 useReducer 的關鍵差異：使用 useReducer 時，通過傳遞消息來改變狀態，而不是直接調用狀態更新函數。 如果你知道 Redux 是如何工作的，這就基本上是一樣的。一個 reducer 是一個純函數，它根據先前的狀態和已分發的動作計算出下一個狀態。 (currentState, action) => newState “純函數” 是什麼意思？純函數接收輸入並返回輸出，而不會改變輸入或其他任何東西。這意味著 reducer 返回一個完全替換先前狀態的全新狀態。 一個 reducer 應該： 永遠不要改變其參數 永遠不要生成副作用（不要有任何改變狀態的 API 調用） 永遠不要調用非純函數，即根據與其輸入之外的因素改變其輸出的函數（例如 Date.now() 或 Math.random()） 雖然沒有強制要求，但你應該遵守這些規則。這樣做的好處是：reducer 更容易進行測試，因為它們沒有副作用。 這允許集中管理狀態，允許組件通過發送消息來修改狀態，還可以在組件中使用和更改較為複雜的狀態。 讓我們通過一個計數器組件來舉個例子。 useReducer 接受一個 reducer 函數和一個初始狀態值作為參數。在這個例子中，我們的狀態是一個整數，起始值為 0：...

給定一個表單，你如何獲取其中一個表單字段的值？ 一個常見的情境是，當你有一個表單時，你想要獲取其中一個表單字段的值，例如當用戶點擊一個按鈕時。 你可以如何實現這個功能？ 使用React的hooks，你可以為每個輸入字段創建一個變量，在onChange事件上監聽並調用相應變量的 “set” 函數。 以下是一個示例： const [title, setTitle] = useState('') 在JSX中的輸入字段： <input onChange={event => setTitle(event.target.value)} /> 這樣，當你在表單的提交事件處理程序中，或者任何你希望的地方，你都可以從 title 變量中獲取字段的值。