React鉤子簡介

了解Hooks如何幫助您構建React應用程序

Hooks是一個將在React 16.7中引入的功能,它將在將來改變我們編寫React應用程序的方式。

在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 Hooks示例#1計數器由Flavio Copes(@flaviocopes) 在密碼筆

Tech Wiki Online!