Tại sao bạn nên sử dụng Thành phần hàm & Hook trong ReactJS
By hientd, at: 17:43 Ngày 16 tháng 9 năm 2024
Thời gian đọc ước tính: __READING_TIME__ minutes
Vì sao bạn nên sử dụng Thành phần hàm & Hooks trong ReactJS
Những năm gần đây, việc phát triển React đã chuyển dịch đáng kể về phía các thành phần hàm và hooks. Nếu bạn vẫn đang sử dụng các thành phần lớp trong dự án của mình, đã đến lúc cần xem xét lại phương pháp tiếp cận. Thành phần hàm kết hợp với hooks giúp mã của bạn đơn giản hơn, sạch hơn và hiệu quả hơn.
Trong bài viết này, chúng ta sẽ khám phá những lợi ích của thành phần hàm và hooks bằng một ví dụ nhất quán để minh họa cách bạn có thể nâng cấp quy trình phát triển React của mình.
Thành phần hàm là gì?
Thành phần hàm chỉ là các hàm JavaScript trả về JSX, mà React sử dụng để hiển thị các phần tử trên màn hình. Không giống như các thành phần lớp, thành phần hàm đơn giản hơn và không có chi phí không cần thiết như các phương thức vòng đời hoặc từ khóa this.
Một so sánh nhanh giữa hai phương pháp:
Thành phần lớp:
class SimpleComponent extends React.Component {
render() {
return < div >Welcome to the Glinteco! < / div >;
}
}
Thành phần hàm:
const MyComponent = () => {
return < div >Welcome to the Glinteco!< / div >;
};
Như bạn thấy, thành phần hàm sạch hơn và dễ viết hơn. Điều này làm cho nó lý tưởng cho các thành phần đơn giản mà bạn không cần phải quản lý trạng thái hoặc các sự kiện vòng đời.
Vì sao bạn nên sử dụng Thành phần hàm
1. Mã đơn giản hơn và dễ đọc hơn
Một trong những lý do chính để chuyển sang thành phần hàm là sự đơn giản. Thành phần hàm gọn hơn và chúng loại bỏ sự cần thiết phải quản lý this hoặc các phương thức vòng đời. Điều này làm cho mã dễ theo dõi và bảo trì hơn.
Hãy tưởng tượng bạn muốn xây dựng một thành phần bộ đếm. Dưới đây là cách nó sẽ trông như thế nào khi sử dụng thành phần hàm:
const Counter = () => {
return (
< div >
< p >You clicked 0 times
< button >Click me < / button >
< / div >
);
};
Thành phần này đã dễ hiểu hơn so với phiên bản dựa trên lớp, và chúng ta thậm chí chưa thêm bất kỳ logic nào.
2. Ít mã hơn
Với thành phần hàm, bạn có thể tránh viết mã không cần thiết như hàm tạo, phương thức vòng đời và this. Điều này có nghĩa là ít mã hơn để viết, dễ bảo trì.
Hãy thêm một số chức năng vào bộ đếm bằng cách sử dụng thành phần lớp so với thành phần hàm. Đây là phiên bản dựa trên lớp:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
< div >
< p >You clicked {this.state.count} times
< button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
< /button >
< / div >
);
}
}
Hãy so sánh điều đó với phiên bản hàm sử dụng hooks:
import { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
< div >
< p >You clicked {count} times
< button onClick={() => setCount(count + 1)}>Click me
< / button >
< / div >
);
};
Trong thành phần hàm, có ít mã hơn và logic trạng thái dễ theo dõi hơn với các hooks như useState.
Giới thiệu Hooks: Điều gì làm cho chúng mạnh mẽ
Trước khi React giới thiệu hooks, các thành phần hàm không thể quản lý trạng thái hoặc thực hiện các tác dụng phụ. Hooks đã thay đổi điều đó, cho phép các thành phần hàm làm mọi thứ mà các thành phần lớp có thể làm—nhưng theo cách linh hoạt và có thể tái sử dụng hơn.
Hãy xem hai hooks phổ biến: useState và useEffect.
1. Quản lý trạng thái với useState
Trong ví dụ trên, chúng ta đã sử dụng hook useState để quản lý trạng thái count. Hooks cho phép bạn quản lý trạng thái trực tiếp trong các thành phần hàm, giúp dễ dàng thêm hành vi có trạng thái mà không cần chuyển sang các thành phần lớp.
const [count, setCount] = useState(0)
Hook useState trả về hai giá trị: trạng thái hiện tại (count) và một hàm để cập nhật trạng thái đó (setCount). Bạn có thể sử dụng hook này nhiều lần tùy ý trong một thành phần.
2. Xử lý tác dụng phụ với useEffect
Hooks cũng cho phép bạn xử lý các tác dụng phụ như lấy dữ liệu hoặc thao tác DOM. Điều này được thực hiện bằng cách sử dụng hook useEffect. Ví dụ, hãy cập nhật tiêu đề tài liệu mỗi khi count thay đổi:
import { useEffect } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
< div >
< p >You clicked {count} times
< button onClick={() => setCount(count + 1)}>Click me < / button >
< / div >
);
};
Trong ví dụ này, useEffect được kích hoạt mỗi khi count thay đổi và nó cập nhật tiêu đề tài liệu cho phù hợp. Đối số thứ hai [count] đảm bảo rằng hiệu ứng chỉ chạy khi count cập nhật.
Lợi ích của việc sử dụng Thành phần hàm và Hooks
1. Logic có thể tái sử dụng với Custom Hooks
Một trong những khía cạnh mạnh mẽ nhất của hooks là khả năng tạo ra các custom hooks đóng gói logic và có thể được tái sử dụng trên nhiều thành phần. Điều này làm cho mã của bạn mô đun hơn và dễ bảo trì hơn. Ví dụ, bạn có thể tạo một custom hook để xử lý bộ hẹn giờ hoặc lấy dữ liệu từ API.
2. Dễ kiểm thử hơn
Thành phần hàm chỉ là các hàm JavaScript, vì vậy chúng dễ kiểm thử hơn. Bạn không cần phải lo lắng về các phương thức lớp hoặc quản lý this. Bạn chỉ cần kiểm thử đầu ra của thành phần và xác minh hành vi của hooks.
3. Hiệu năng tốt hơn
Vì thành phần hàm không có chi phí quản lý các phương thức vòng đời như các thành phần lớp, nên chúng có xu hướng hoạt động tốt hơn. Hooks cung cấp cho bạn nhiều quyền kiểm soát hơn về cách và thời điểm các thành phần cập nhật, điều này có thể dẫn đến ít lần render không cần thiết hơn và tối ưu hóa tốt hơn.
4. Bảo vệ mã của bạn cho tương lai
Nhóm React đã chuyển sang thành phần hàm và hooks như phương pháp tiếp cận mặc định. Các thành phần lớp vẫn được hỗ trợ, nhưng hooks đại diện cho tương lai của React. Bằng cách áp dụng chúng ngay bây giờ, bạn đảm bảo rằng mã của bạn sẽ luôn hiện đại và dễ nâng cấp khi React tiếp tục phát triển.
Kết luận
Thành phần hàm và hooks là tương lai của việc phát triển React. Chúng đơn giản hóa mã của bạn, giúp dễ dàng quản lý trạng thái và tác dụng phụ hơn và cung cấp hiệu năng và khả năng tái sử dụng tốt hơn. Bằng cách chuyển sang thành phần hàm, bạn không chỉ viết mã dễ bảo trì hơn mà còn bảo vệ ứng dụng của mình cho các tính năng React sắp tới.
Nếu bạn chưa từng, đã đến lúc bắt đầu tái cấu trúc các thành phần lớp đó và nắm lấy sức mạnh của hooks!
