Hooks là gì và công dụng của nó như thế nào?
React là một trong những thư viện phổ biến nhất được sử dụng trong phát triển web hiện nay. Nó đã cách mạng hóa cách xây dựng các ứng dụng web, giúp việc này trở nên dễ dàng và hiệu quả hơn bao giờ hết. Một trong những lý do chính khiến nó trở nên phổ biến là sự ra đời của các hook, giúp các nhà phát triển dễ dàng quản lý trạng thái trong ứng dụng của họ hơn.
Trong bài viết này, chúng ta sẽ xem xét kỹ hơn về hooks là gì và cách chúng có thể được sử dụng trong các ứng dụng React. Chúng ta sẽ bắt đầu bằng cách thảo luận về khái niệm trạng thái trong React, trước khi chuyển sang giải thích hooks là gì và chúng hoạt động như thế nào. Chúng tôi cũng sẽ cung cấp các ví dụ về cách hooks có thể được sử dụng trong các loại ứng dụng React khác nhau.
Trạng thái trong React
Trước khi chúng ta có thể thảo luận về hook, trước tiên chúng ta cần hiểu khái niệm trạng thái trong React. Trong React, trạng thái được sử dụng để quản lý dữ liệu được một thành phần sử dụng. Dữ liệu này có thể là bất kỳ thứ gì từ chuỗi hoặc số đến mảng hoặc đối tượng. Khi trạng thái của một thành phần thay đổi, React sẽ tự động kết xuất lại thành phần để phản ánh trạng thái mới.
Có hai cách để quản lý trạng thái trong React: sử dụng thành phần lớp và sử dụng thành phần chức năng. Thành phần lớp sử dụng một phương thức đặc biệt gọi là setState để cập nhật trạng thái của thành phần, trong khi thành phần chức năng dựa vào hook để quản lý trạng thái.
Hooks là gì?
Hooks là một tính năng mới trong React được giới thiệu trong phiên bản 16.8. Chúng cho phép các nhà phát triển sử dụng trạng thái và các tính năng React khác trong các thành phần chức năng. Điều này có nghĩa là các nhà phát triển hiện có thể tạo các thành phần sử dụng trạng thái mà không cần phải sử dụng các thành phần lớp.
Hook có nhiều dạng khác nhau, mỗi dạng phục vụ một mục đích khác nhau. Các hook được sử dụng phổ biến nhất là useState, useEffect, useContext và useReducer. Chúng ta sẽ thảo luận chi tiết hơn về từng hook này bên dưới.
sử dụngState
Móc useState được sử dụng để quản lý trạng thái trong các thành phần chức năng. Nó lấy một giá trị ban đầu làm đối số và trả về một mảng chứa trạng thái hiện tại và một hàm có thể được sử dụng để cập nhật trạng thái. Sau đây là một ví dụ về cách sử dụng useState:
```javascript
import React, { useState } từ "react";
hàm Ví dụ() {
const [đếm, thiết lậpĐếm] {{0}} useState(0);
trở lại (
Bạn đã nhấp {count} lần
);
}
```
Trong ví dụ này, chúng ta sử dụng useState để quản lý trạng thái của bộ đếm. Giá trị ban đầu của bộ đếm được đặt thành 0 bằng useState. Sau đó, chúng ta sử dụng setCount để cập nhật giá trị của bộ đếm mỗi lần nhấp vào nút.
sử dụngHiệu ứng
Hook useEffect được sử dụng để thực hiện các hiệu ứng phụ trong các thành phần chức năng. Hiệu ứng phụ là bất kỳ hành động nào được thực hiện bên ngoài thành phần, chẳng hạn như truy xuất dữ liệu từ API hoặc cập nhật tiêu đề của trang.
Hook useEffect lấy hai đối số: một hàm thực hiện hiệu ứng phụ và một mảng các phụ thuộc. Hàm được gọi mỗi khi thành phần được hiển thị và các phụ thuộc được sử dụng để xác định thời điểm hàm nên được gọi. Sau đây là một ví dụ về cách sử dụng useEffect:
```javascript
import React, { useState, useEffect } từ "react";
hàm Ví dụ() {
const [đếm, thiết lậpĐếm] {{0}} useState(0);
useEffect(() => {
document.title=`Bạn đã nhấp ${count} lần`;
}, [đếm]);
trở lại (
Bạn đã nhấp {count} lần
);
}
```
Trong ví dụ này, chúng ta sử dụng useEffect để cập nhật tiêu đề của trang mỗi khi bộ đếm được cập nhật. Chúng ta truyền vào một mảng chứa biến count cho useEffect, cho biết React chỉ gọi hàm khi count thay đổi.
sử dụngBối cảnh
Hook useContext được sử dụng để truy cập dữ liệu được lưu trữ trong trình cung cấp ngữ cảnh. Ngữ cảnh là một cách để chia sẻ dữ liệu giữa các thành phần mà không cần truyền dữ liệu xuống thông qua props.
Để sử dụng useContext, trước tiên chúng ta cần tạo một context provider bằng hàm createContext. Sau đó chúng ta có thể sử dụng useContext để truy cập dữ liệu được lưu trữ trong provider. Sau đây là ví dụ về cách sử dụng useContext:
```javascript
import React, { useState, useContext } từ "react";
const ThemeContext=React.createContext("ánh sáng");
hàm Ví dụ() {
const [chủ đề, setTheme]=useState("ánh sáng");
trở lại (
);
}
hàm Toolbar() {
chủ đề hằng số=useContext(ThemeContext);
trở lại (
Chủ đề hiện tại là: {theme}
);
}
```
Trong ví dụ này, chúng ta sử dụng useContext để truy cập biến theme được lưu trữ trong trình cung cấp ThemeContext. Chúng ta có thể cập nhật biến theme bằng cách nhấp vào nút trong thành phần Example.
sử dụngReducer
Hook useReducer được sử dụng để quản lý trạng thái phức tạp trong các thành phần chức năng. Nó tương tự như hook useState, nhưng thay vì cập nhật trạng thái trực tiếp, nó sử dụng hàm reducer để cập nhật trạng thái.
Một hàm reducer lấy hai đối số: trạng thái hiện tại và một đối tượng hành động. Nó trả về một trạng thái mới dựa trên hành động đã được thực hiện. Hook useReducer lấy hàm reducer và trạng thái ban đầu làm đối số và trả về một mảng chứa trạng thái hiện tại và một hàm dispatch có thể được sử dụng để thực hiện các hành động. Sau đây là một ví dụ về cách useReducer có thể được sử dụng:
```javascript
nhập React, { useReducer } từ "react";
hàm giảm (trạng thái, hành động) {
chuyển đổi (hành động.loại) {
trường hợp "tăng dần":
trả về { số đếm: số đếm trạng thái + 1 };
trường hợp "giảm":
trả về { số đếm: số đếm trạng thái - 1 };
mặc định:
ném lỗi mới();
}
}
hàm Ví dụ() {
const [trạng thái, phân phối] {{0}} useReducer(bộ giảm tốc, { số lượng: 0 });
trở lại (
Bạn đã nhấp vào {state.count} lần
);
}
```
Trong ví dụ này, chúng ta sử dụng useReducer để quản lý trạng thái của bộ đếm. Chúng ta truyền vào một hàm reducer cập nhật biến count dựa trên hành động đã thực hiện. Sau đó, chúng ta sử dụng hàm dispatch để thực hiện các hành động.
Phần kết luận
Hooks giúp quản lý trạng thái trong các ứng dụng React dễ dàng hơn bao giờ hết. Chúng cho phép chúng ta tạo các thành phần chức năng có thể sử dụng trạng thái và các tính năng React khác mà không cần phải sử dụng các thành phần lớp. Trong bài viết này, chúng tôi đã thảo luận về các hook được sử dụng phổ biến nhất trong React: useState, useEffect, useContext và useReducer. Chúng tôi cũng đã cung cấp các ví dụ về cách các hook này có thể được sử dụng trong các loại ứng dụng React khác nhau.
Bằng cách hiểu cách thức hoạt động của hook và cách sử dụng chúng, bạn có thể viết code hiệu quả và dễ bảo trì hơn trong các ứng dụng React của mình. Nếu bạn chưa làm vậy, chúng tôi khuyến khích bạn bắt đầu sử dụng hook trong các dự án của riêng bạn và trải nghiệm những lợi ích mà chúng mang lại cho quy trình phát triển của bạn.