Kiến thức cơ bản về React Hooks, useState Hooks

Trong câu chuyện này, chúng ta sẽ đề cập đến tất cả những điều cơ bản về react hook và tìm hiểu về react hook tích hợp được gọi là useState ().

Điều kiện tiên quyết -

Bạn nên biết những điều cơ bản về HTML, Javascript, React là gì và nó hoạt động như thế nào .

Và nếu bạn đáp ứng các điều kiện tiên quyết này thì bạn có thể đi được .

React Hooks là gì?

• React Hooks đã được giới thiệu trong React 16.8 .
• Phản ứng móc về cơ bản các chức năng cho phép bạn xử lý các trạng thái của ứng dụng web, và cho phép bạn dễ dàng làm việc với khác phản ứng tính năng như componenDidMount () , componenDidUpdate () mà không cần viết lớp .
• Bạn chỉ có thể sử dụng React hook trong các thành phần chức năng , không phải trong các thành phần do lớp xác định.
• Nói một cách dễ hiểu, chúng ta có thể định nghĩa các hàm phản ứng là các hàm cho phép bạn “tham gia” vào trạng thái React và các tính năng vòng đời từ các thành phần chức năng .
• Có rất nhiều loại React hooks được tích hợp sẵn -

1. useState ()
2. useEffect ()
3. useContext ()

1. useReducer ()
2. useRef ()
3. useCallback ()
4. useMemo ()

UseState là gì?

• useState là một trong những hook React phổ biến nhất và được sử dụng nhiều nhất.
• useState được sử dụng như các móc quản lý trạng thái của một thành phần cụ thể.
• useState hook được sử dụng để xử lý trạng thái của các thành phần của chúng ta.
• useState cho phép chúng ta tạo và xử lý các biến trạng thái một cách dễ dàng và thuận tiện.
• Trong useState, chúng ta thiết lập trạng thái ban đầu của biến trạng thái và sử dụng hàm định nghĩa useState để thay đổi trạng thái của biến trạng thái đó từ trạng thái nguyên sang trạng thái hiện tại .
• Chúng ta chỉ có thể sử dụng useState trong các thành phần chức năng không phải trong các thành phần dựa trên lớp .
• useState cũng giống như this.statevà this.setStatetrong các thành phần dựa trên lớp React .
• Đừng lo lắng, nếu bạn không hiểu trạng thái và sử dụng State đúng cách, nó sẽ hoàn toàn rõ ràng trong đầu bạn sau khi bạn hiểu nó bằng ví dụ mã.

Trong phần này, tôi sẽ tạo một bộ đếm đơn giản bằng hook useState để bạn có thể dễ dàng hiểu cách useState hoạt động và khi nào sử dụng nó.

• Mã -
• Giải thích mã -
• Trong dòng mã này, chúng tôi đã nhập useStatehook từ ‘react’.
• Sau đó, chúng tôi sẽ tạo một thành phần chức năng được gọi Apptrong tệp App.js.
• Trong thành phần chức năng đó, chúng ta sẽ tạo biến trạng thái được gọi count và hàm useState được gọi setCount.
• Ở dòng thứ 6 của đoạn mã này, chúng ta đang sử dụng hook useState, trong đó chúng ta đã gọi biến trạng thái count và để thay đổi trạng thái của số đếm đó, chúng ta đã tạo một hàm được gọi setCount.
• Ở đây ở useState(0)trạng thái sinh dục 0 được xác định của count trạng thái varibale. Vì vậy, lúc đầu khi thành phần ứng dụng của chúng tôi tải giá trị của count biến trạng thái sẽ bằng 0. Và sử dụng setCountphương pháp này, chúng tôi sẽ có thể thay đổi giá trị của count biến trạng thái.
• Bây giờ chúng ta đã tạo một phương thức được gọi là phương thức decreamentnày sẽ giảm count giá trị biến trạng thái đi 1 bất cứ khi nào chúng ta nhấp vào nút (giảm -) . Về cơ bản những gì phương thức này làm là nó sẽ thiết lập trạng thái của countbiến thành phương thức count-1sử dụng setCount.
• Bây giờ chúng ta đã tạo một phương thức được gọi là phương thức increamentnày sẽ tăng count giá trị biến trạng thái lên 1 bất cứ khi nào chúng ta nhấp vào nút (tăng +) . Về cơ bản những gì phương thức này làm là nó sẽ thiết lập trạng thái của countbiến thành phương thức count+1sử dụng setCount.
• Trong return phần của mã này là tự giải thích và trong nút ( tăng +), chúng tôi đã chuyển increament phương thức trong onClick trường hợp và trong nút (giảm-), chúng tôi đã chuyển decreamentphương thức.

Phần kết luận

Vì vậy, ở đây trong bài viết này, chúng ta đã trình bày những kiến thức cơ bản về React hook và useState hook là gì, nó hoạt động như thế nào và cách triển khai nó .

Hy vọng các bạn đã thích đọc và học.

Nếu bạn thích bài viết này, vui lòng để lại vỗ tay và chia sẻ nó với những người khác để họ cũng có thể học hỏi từ nó.