Tạo Logic Tái Sử Dụng Với Custom Hooks Trong React
Các Hook tích hợp sẵn của React như useState và useEffect cho phép quản lý trạng thái và tính năng lifecycle một cách trực tiếp trong các functional component. Tuy nhiên, khi bạn cần tái sử dụng logic trên nhiều component khác nhau, việc sử dụng custom Hooks là một giải pháp hiệu quả giúp cho mã nguồn của bạn trở nên gọn gàng và dễ mở rộng hơn.
Bạn có thể tham khảo thêm: Tạo Chatbot React Đơn Giản
Khái Niệm Và Lợi Ích Của React Hooks
React Hooks Là Gì?
React Hooks là các hàm cho phép bạn sử dụng state và các tính năng lifecycle trong các functional component. Trong khi các Hook tích hợp sẵn như useState và useEffect rất hữu ích, khi cần tái sử dụng logic qua nhiều component khác nhau, custom Hooks sẽ là lựa chọn hoàn hảo.
Lợi Ích Của Hooks
- Tái Sử Dụng Logic: Custom Hooks đóng gói các logic có thể tái sử dụng, giúp bạn dễ dàng quản lý state và tính năng lifecycle trên nhiều component khác nhau.
- Quản Lý Dễ Dàng Hơn: Giảm thiểu sự dư thừa mã và làm cho dự án của bạn dễ bảo trì và mở rộng hơn.
Cách Xác Định Một Hàm Là Hook
Một hàm được coi là Hook trong React khi nó:
- Đóng gói logic stateful có thể tái sử dụng.
- Tuân theo quy ước đặt tên bằng cách thêm tiền tố "use". Tiền tố này giúp React áp dụng các quy tắc nội bộ để quản lý hành vi của hàm đó.
Ví Dụ Ứng Dụng Custom Hooks Trong Quản Lý Form
Chúng ta sẽ cùng tìm hiểu một ví dụ ứng dụng sử dụng các custom Hooks để quản lý một biểu mẫu thu thập thông tin người dùng, bao gồm hai phần: Thông tin cá nhân và Thông tin thanh toán. Bằng cách sử dụng các custom Hooks, việc xử lý và xác thực form sẽ trở nên đơn giản hơn.
1. PersonalDetailsForm.jsx – Sử Dụng useForm Và Lược Đồ Xác Thực
Dưới đây là một thành phần React cho biểu mẫu Thông tin cá nhân:
- Cấu Hình Ban Đầu: Khởi tạo
initialDatavới các trường cần thiết và xác địnhvalidationSchemađể chỉ định các quy tắc xác thực.- Sử dụng custom Hook
useFormđể quản lý trạng thái và xử lý xác thực.
- Sử dụng custom Hook
javascript
const PersonalDetailsForm = ({ title }) => {
const initialData = { ... };
const validationSchema = { ... };
const { formData, handleInputChange, handleSubmit, validationProps } = useForm(initialData, () => console.log(formData), validationSchema);
return (
<form onSubmit={handleSubmit}>
<Input ... />
<Dropdown ... />
<Button type="submit" text="Submit" />
</form>
);
};2. useForm.js Custom Hook – Xử Lý Trạng Thái Biểu Mẫu Và Gửi
Custom Hook useForm sẽ quản lý trạng thái biểu mẫu và xử lý việc gửi biểu mẫu. Logic trong handleInputChange giúp phân tích cú pháp các kiểu dữ liệu khác nhau và xác thực các trường một cách hiệu quả.
3. useValidation.js Custom Hook - Logic Xác Thực Tập Trung
Custom Hook useValidation tập trung vào việc xác thực dữ liệu nhập từ người dùng, với các hàm để kiểm tra từng trường cũng như xác thực tất cả các trường trước khi gửi.
4. PaymentDetailsForm.jsx – Tính Tái Sử Dụng
Bạn có thể dễ dàng tái sử dụng custom Hooks như useForm và useValidation trong các thành phần form khác như PaymentDetailsForm mà không cần sao chép các logic quản lý state hay xác thực.
Quy Tắc Sử Dụng Hooks
Để đảm bảo tính ổn định, React đặt ra một số quy tắc cho việc sử dụng Hooks, bao gồm:
- Luôn gọi Hooks ở cấp cao nhất của ứng dụng.
- Không sử dụng Hooks trong vòng lặp, điều kiện hoặc hàm rẽ nhánh.
- Chỉ sử dụng Hooks trong các functional component hoặc trong custom Hooks.
Kết Luận
Sự tái sử dụng và khả năng bảo trì trong lập trình là rất quan trọng để xây dựng các ứng dụng có thể mở rộng. Custom Hooks trong React cho phép bạn dễ dàng quản lý state và logic, từ đó dẫn đến mã nguồn sạch hơn, dễ hiểu hơn và dễ bảo trì hơn.
source: viblo
