React 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 上的示例:...