Cách sử dụng hook useState React

Tìm hiểu về useState React hook hữu ích để làm gì và cách làm việc với nó!

Kiểm tra của tôiGiới thiệu về React hooksđầu tiên, nếu bạn chưa quen với chúng.

Một móc React mà tôi thường sử dụng nhất làuseState.

import React, { useState } from 'react'

Sử dụnguseState()API, bạn có thể tạo một biến trạng thái mới và có một cách để thay đổi nó.useState()chấp nhận giá trị ban đầu của mục trạng thái và trả về một mảng chứa biến trạng thái và hàm bạn gọi để thay đổi trạng thái. Vì nó trả về một mảng mà chúng tôi sử dụngcấu trúc mảngđể truy cập từng mục riêng lẻ, như sau:const [count, setCount] = useState(0)

Đây là một ví dụ thực tế:

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’))

Bạn có thể thêm bao nhiêuuseState()cuộc gọi bạn muốn, để tạo nhiều biến trạng thái như bạn muốn. Chỉ cần đảm bảo rằng bạn gọi nó ở cấp cao nhất của một thành phần (không phải trong mộtifhoặc trong bất kỳ khối nào khác).

Ví dụ trên Codepen:

Xem bútBộ đếm ví dụ về React Hooks # 1bởi Flavio Copes (@flaviocopes) trênCodePen.

Tech Wiki Online!