Trong bài viết này, chúng ta sẽ khám phá ReactJS và tìm hiểu các khái niệm cơ bản để làm quen với nó. Vì đây là bài viết đầu tiên trong loạt bài về ReactJS, nên nội dung sẽ chủ yếu tập trung vào việc giới thiệu và giải thích các khái niệm liên quan.
1. ReactJS là gì?
ReactJS là một thư viện JavaScript hiệu quả và linh hoạt để xây dựng các thành phần giao diện người dùng (UI) có thể tái sử dụng. Thư viện này giúp phân chia các UI phức tạp thành các thành phần nhỏ hơn, gọi là components. Jordan Walke, một kỹ sư phần mềm tại Facebook, đã tạo ra ReactJS. Ban đầu, Facebook phát triển và duy trì ReactJS, do đó thư viện này đã được sử dụng trong các sản phẩm của các công ty như WhatsApp và Instagram. Một trong những đặc điểm nổi bật của React là việc sử dụng “Virtual DOM” (Document Object Model ảo) để tăng hiệu suất và giảm thiểu các thao tác DOM đắt đỏ.
ReactJS thường được sử dụng để xây dựng các ứng dụng single page application (SPA). Một trong những điểm hấp dẫn của ReactJS là nó có thể được sử dụng không chỉ trên phía client mà còn trên phía server.
2. Các khái niệm cơ bản về ReactJS
Khi bắt đầu tìm hiểu về ReactJS, việc nắm bắt các khái niệm cơ bản là rất quan trọng, bởi những khái niệm này sẽ theo bạn trong suốt quá trình học tập và làm việc với ReactJS.
DOM ảo
Để hiểu rõ hơn về Virtual DOM, trước tiên chúng ta cần tìm hiểu về DOM. DOM là Document Object Model, một cấu trúc trừu tượng của văn bản. HTML DOM là các đoạn mã HTML, trong đó mỗi phần tử trong HTML là một nút của DOM.
Vậy tại sao cần Virtual DOM khi đã có DOM? Khi làm việc với DOM, mỗi khi một nút thay đổi, tất cả các nút khác cũng phải thay đổi theo. Ví dụ, nếu bạn có một danh sách bao gồm 10 mục và thay đổi một mục, thì DOM sẽ cập nhật lại cả 9 mục còn lại về trạng thái ban đầu của chúng.
Điều này không cần thiết và làm cho trình xử lý chậm lại, đặc biệt là trong các ứng dụng SPA, nơi mà các thay đổi DOM diễn ra liên tục. Đây là lý do khiến Virtual DOM ra đời. Virtual DOM được xây dựng dựa trên DOM thật và có một số thuộc tính của DOM thật, nhưng khi thay đổi Virtual DOM, nó không thể thực hiện thay đổi trên màn hình giống như DOM thật.
Khi chúng ta render một phần tử JSX, mỗi đối tượng trong Virtual DOM sẽ được cập nhật. Sau đó, ReactJS sẽ so sánh Virtual DOM hiện tại với Virtual DOM trước đó để xác định những thay đổi cần thiết. Chỉ sau khi so sánh, ReactJS mới cập nhật phần tương ứng trên DOM thật. Các thay đổi này sau đó sẽ được hiển thị trên màn hình.
Quay lại ví dụ ở trên, khi sử dụng Virtual DOM, chỉ có một mục được cập nhật thay vì toàn bộ danh sách. Điều này giúp tiết kiệm tài nguyên và tăng tốc độ xử lý đáng kể.
X
JSX là viết tắt của Javascript XML, nó cho phép bạn viết các đoạn mã HTML trong React một cách dễ dàng và có cấu trúc hơn. Về cú pháp cũng gần tương tự như HTML, giả sử mình có 1 đoạn mã HTML như sau:
|
1
|
<p class="text">freetuts.net</p> |
Trong JSX thì sẽ được viết như thế này:
|
1
|
<p className="text">freetuts.net</p> |
chỉ cần thay class thành className xong, ngoài ra còn một vài cú pháp đặc biệt của JSX mình sẽ giới thiệu ở bài viết tiếp theo.
Các thành phần
Khi bạn làm việc với một dự án lớn, giao diện người dùng có độ phức tạp cao được chia thành các phần khác nhau. Việc chia nhỏ các thành phần trong UI là một điều cần thiết, các phần nhỏ này được gọi là các thành phần, cho phép render các đoạn mã HTML,… Trong ReactJS cách viết các thành phần được chia thành 2 loại:
- thành phần lớp
- các thành phần chức năng.
|
1
2
3
4
5
6
7
số 8
|
//Function componentfunction Clock(props) {return (<div><h1>Hello, world!</h1></div>);} |
|
1
2
3
4
5
6
7
số 8
9
10
|
//Class componentclass Clock extends React.Component {render() {return (<div><h1>Hello, world!</h1></div>);}} |
Mỗi loại sẽ có ưu và nhược điểm khác nhau, trong bài viết về phần này mình sẽ giới thiệu kĩ hơn.
Đạo cụ và Nhà nước
Props là một tham số được chuyển qua lại giữa các React Components, các props này được truyền qua các component với cú pháp giống như các thuộc tính HTML.
|
1
|
<Post title="Học ReactJS cùng Freetuts.net"> |
State là một đối tượng lưu trữ giá trị của các thuộc tính bên trong các thành phần và chỉ tồn tại trong phạm vi của thành phần đó. Mỗi khi bạn thay đổi giá trị của một trạng thái thì thành phần đó sẽ được render lại.
|
1
2
3
4
5
6
7
số 8
9
10
11
12
13
|
class Car extends React.Component {constructor(props) {super(props);this.state = {brand: "Ford"};}render() {return (<div>h1>My Car</h1></div>);}} |
Vòng đời React
React Lifcecycle là một vòng đời của component, khi chúng ta thực hiện render một component thì ReactJS thực hiện nhiều tiến trình khác nhau, các tiến trình này được lặp lại nhiều lần đối với các component.
Giả sử khi một thành phần được gọi trước tiên nó sẽ cài đặt props và state, sau đó tiến hành mouting, update, unmouting,…việc tham gia vào quá trình này bạn cần sử dụng đến các hàm hỗ trợ của lifcecycle.
Trong bài viết này, chúng ta đã khám phá ReactJS và các khái niệm cơ bản liên quan đến nó. Mặc dù đây là những kiến thức cơ bản, nhưng chúng rất quan trọng đối với quá trình làm việc với ReactJS sau này. Hy vọng rằng bài viết này sẽ có ích cho bạn.
