React ES6 Destructuring

Destructuring

Để minh hoạ cho Destructuring, chúng ta sẽ đi làm một cái bánh sandwich. Chúng ta có bao giờ lấy tất cả mọi thứ ra khỏi tủ lạnh để làm bánh sandwich hay không? Câu trả lời là Không, chúng ta chỉ lấy ra những thứ mà chúng ta sẽ sử dụng để làm bánh sandwich mà thôi.

Destructuring thì cũng hoàn toàn giống như vậy. Chúng ta có thể có một mảng hoặc một đối tượng mà chúng ta đang làm việc với nó, nhưng chúng ta chỉ cần lấy ra một số mục được chứa trong đó thôi.

Destructuring giúp chúng ta dễ dàng chỉ trích xuất ra những gì cần thiết.

Destructuring một mảng

Ví dụ sau đây là cách cũ để gán các phần tử của mảng cho biến:

Ví dụ sau đây là cách mới để gán các phần tử của mảng cho biến:

Khi Destructuring một mảng, thứ tự mà các biến được khai báo thì rất quan trọng.

Nếu như chúng ta chỉ muốn car và suv thì chúng ta có thể bỏ đi truck nhưng phải giữ nguyên dấu phẩy:

Destructuring có ích khi một function trả về một mảng:

Ví dụ:

Destructuring một đối tượng

Ví dụ sau đây là cách cũ để sử dụng một đối tượng ở bên trong một function:

Ví dụ sau đây là cách mới để sử dụng một đối tượng ở bên trong một function:

Lưu ý rằng các thuộc tính của đối tượng không cần phải được khai báo theo một thứ tự cụ thể.

Chúng ta thậm chí có thể Destructuring sâu hơn nữa các đối tượng được lồng nhau bằng cách tham chiếu đến đối tượng được lồng nhau đó sau đó sử dụng một dấu hai chấm và dấu ngoặc nhọn để Destructuring lần nữa các mục cần thiết từ đối tượng được lồng nhau:

Ví dụ:

React ES6 Array Methods

Các phương thức mảng

Trong JavaScript có rất nhiều phương thức mảng.

Một trong số những phương thức mảng hữu ích nhất trong React là phương thức map().

Phương thức map() cho phép chúng ta chạy một function trên mỗi item trong mảng, và trả về một mảng mới như là kết quả.

Trong React, phương thức map() có thể được sử dụng để sinh ra các danh sách.

Ví dụ sau sẽ sinh ra một danh sách các item từ một mảng:

Full code:

Kết quả trả về:

React ES6 Variables

Biến

Trước ES6 chúng ta chỉ có một cách duy nhất để định nghĩa các biến: với từ khóa var. Nếu như chúng ta không định nghĩa các biến, thì chúng sẽ được gán cho global object. Khi chúng ta đang ở chế độ nghiêm ngặt, chúng ta sẽ gặp lỗi nếu như các biến của chúng ta không được định nghĩa.

Bây giờ, với ES6, chúng ta có ba cách để định nghĩa các biến: var, let, và const.

Ví dụ sau sẽ khai báo biến bằng từ khóa var:

Nếu như bạn sử dụng từ khóa var bên ngoài một function, thì biến sẽ thuộc về phạm vi toàn cầu.

Nếu như bạn sử dụng từ khóa var bên trong một function, thì biến sẽ thuộc về function đó.

Nếu như bạn sử dụng từ khóa var bên trong một khối, ví dụ một vòng lặp for, thì biến vẫn có sẵn bên ngoài khối đó.

Lưu ý: var có phạm vi hàm, không phải là phạm vi khối.

Ví dụ sau sẽ khai báo biến bằng từ khóa let:

Từ khóa let là phiên bản phạm vi khối của var, và được giới hạn ở khối (hoặc biểu thức) nơi nó được định nghĩa.

Nếu như bạn sử dụng let bên trong một khối, ví dụ một vòng lặp for, thì biến chỉ có sẵn bên trong vòng lặp đó.

Lưu ý: let có phạm vi khối.

Ví dụ sau sẽ khai báo biến bằng từ khóa const:

const là một từ khóa mà một khi biến đã được tạo ra, thì giá trị của nó không bao giờ có thể thay đổi được.

Lưu ý: const có phạm vi khối.

Từ khóa const gây hiểu lầm một chút.

Từ khóa const không định nghĩa một giá trị bất biến. Nó định nghĩa một hằng số tham chiếu đến một giá trị.

Bởi vì điều này mà bạn không thể:

1. Gán lại một giá trị bất biến.
2. Gán lại một constant array. 
3. Gán lại một constant object.

Nhưng bạn có thể:

1. Thay đổi các phần tử của constant array.
2. Thay đổi các thuộc tính của constant object.

React ES6 Arrow Functions

Arrow Function

Arrow function cho phép chúng ta viết cú pháp của function ngắn hơn:

Ví dụ: Trước đây, function sẽ được viết như sau:

Bây giờ với Arrow Function, function sẽ được viết lại ngắn gọn như sau:

Nếu như function chỉ có một câu lệnh duy nhất, và câu lệnh này trả về một giá trị, thì bạn có thể loại bỏ dấu ngoặc nhọn và từ khóa return:

Ví dụ: Arrow Function trả về giá trị theo mặc định:

Ghi chú: Cú pháp này chỉ làm việc nếu như function chỉ có một câu lệnh duy nhất.

Nếu như bạn có các tham số, thì bạn truyền chúng bên trong dấu ngoặc tròn:

Ví dụ: Arrow Function với các tham số:

Trong thực tế, nếu như bạn chỉ có một tham số, thì bạn cũng có thể bỏ qua dấu ngoặc tròn:

Ví dụ: Arrow Function không có dấu ngoặc tròn:

Về this thì sao?

Việc xử lý this trong các arrow function cũng khác so với các hàm thông thường.

Nói tóm lại, với các arrow function thì không có ràng buộc nào về this.

Trong các hàm thông thường từ khóa this đã miêu tả đối tượng đã gọi hàm, nó có thể là window, document, một button hoặc bất cứ cái gì.

Với các arrow function, từ khóa this luôn luôn miêu tả đối tượng đã định nghĩa arrow function.

Chúng ta hãy xem hai ví dụ sau để hiểu sự khác biệt.

Cả hai ví dụ đều gọi cùng một phương thức hai lần, lần đầu tiên khi trang được tải, và một lần nữa khi người dùng click vào một button.

Ví dụ đầu tiên sử dụng một hàm thông thường, và ví dụ thứ hai sử dụng một arrow function.

Kết quả trả về cho thấy rằng ví dụ đầu tiên trả về hai đối tượng khác nhau (window và button), và ví dụ thứ hai trả về đối tượng Header hai lần.

Ví dụ: Với một hàm thông thường, this miêu tả đối tượng đã gọi hàm:

Ví dụ: Với một arrow function, this miêu tả đối tượng Header, không quan trọng là ai đã gọi hàm:

Hãy nhớ những sự khác biệt này khi bạn làm việc với hàm. Thỉnh thoảng cách hoạt động của các hàm thông thường là điều mà bạn muốn, nếu không thì, hãy sử dụng arrow function.

React ES6 Classes

Class

ES6 đã giới thiệu khái niệm class.

Một class là một loại function, nhưng thay vì sử dụng từ khóa function để bắt đầu, thì chúng ta sử dụng từ khóa class, và các thuộc tính được gán ở bên trong một phương thức có tên là constructor().

Ví dụ: Một class đơn giản có constructor:

Chú ý đến tên của class. Chúng ta đã đặt tên là "Car", với một ký tự viết hoa. Đây là một quy ước đặt tên chuẩn cho các class.

Bây giờ thì bạn có thể tạo ra các object bằng cách sử dụng class có tên là Car :

Ví dụ: Tạo ra một object có tên là "mycar" dựa trên class có tên là Car :

Lưu ý: constructor function sẽ được gọi tự động khi object được khởi tạo.

Phương thức trong các Class

Bạn có thể thêm các phương thức của riêng mình vào một class:

Ví dụ: Tạo ra một phương thức có tên là "present":

Như bạn có thể thấy trong ví dụ bên trên, bạn đã gọi phương thức bằng cách tham chiếu đến tên phương thức của đối tượng, theo sau là dấu ngoặc tròn (các tham số sẽ nằm trong dấu ngoặc tròn).

Sự thừa kế Class

Để tạo ra một sự thừa kế, chúng ta sử dụng từ khóa extends.

Một class được tạo ra với một sự thừa kế sẽ kế thừa tất cả các phương thức từ một class khác:

Ví dụ: Tạo ra một class được đặt tên là "Model", class này sẽ kế thừa các phương thức từ class có tên là "Car":

Phương thức super() sẽ tham chiếu đến class cha.

Bằng cách gọi phương thức super() trong phương thức constructor, chúng ta đã gọi phương thức constructor của class cha và có được quyền truy cập vào các thuộc tính và phương thức của class cha.

Để tìm hiểu thêm về class, hãy xem phần JavaScript Classes của chúng tôi.

React ES6

ES6 là cái gì?

ES6 là viết tắt của ECMAScript 6.

ECMAScript được tạo ra để chuẩn hoá JavaScript, và ES6 là phiên bản thứ 6 của ECMAScript, nó được phát hành vào năm 2015, và cũng được biết đến như là ECMAScript 2015.

Tại sao tôi nên học ES6?

React sử dụng ES6, và bạn nên làm quen với một số tính năng mới như:

1. Classes
2. Arrow Functions
3. Variables (let, const, var)
4. Array Methods like .map()
5. Destructuring
6. Modules
7. Ternary Operator
8. Spread Operator

Upgrade React

Nâng cấp lên React 18

Việc nâng cấp một ứng dụng React hiện có lên phiên bản 18 chỉ yêu cầu hai bước.

Nếu như bạn đang sử dụng phiên bản mới nhất của lệnh create-react-app mà sử dụng React phiên bản 18 thì bạn có thể bỏ qua phần này.

Bước 1: Cài đặt React 18

Để cài đặt React phiên bản mới nhất từ thư mục dự án của bạn, hãy chạy lệnh sau từ terminal:

Bước 2: Sử dụng root API mới

Để tận dụng lợi thế của các tính năng đồng thời của React 18, bạn sẽ cần phải sử dụng root API mới để trình bày phía client.

Ứng dụng của bạn vẫn sẽ làm việc mà không cần sử dụng root API mới. Nếu như bạn tiếp tục sử dụng ReactDOM.render thì ứng dụng của bạn sẽ chạy như React 17.