Các syntax quan trọng trong ES6/7 cho React / React Native

2675
Javascript (Ecmascript – ES) hiện tại là ngôn ngữ phổ biến nhất bởi tính linh động được sử dụng cho cả Website Frontend, Backend cho tới mobile. Trong những năm qua, cộng đồng JS đã phát triển không ngừng nghỉ dẫn tới việc ra đời ES6, 7 và gần đây là ES8 gần như liên tiếp qua mỗi năm. Đây là một tốc độ khá là chóng mặt cho các tín đồ JS đu theo.
React Native sử dụng ES6/7 để các developers viết ứng dụng trên nó. Tuy nhiên Facebook chỉ lấy 1 phần (subset) của ES6/7 và sử dụng Babel để làm transpiler. Chi tiết các bạn có thể xem tại đây.
Dưới đây là các plugin ES6/7 mà React Native đang sử dụng và bài viết này mình tập trung vào những syntax mà mình thấy quan trọng nhất trong React Native.

Khai báo biến với var, let, và const

Khi khai báo biến với Const, biến đó sẽ là immutable variable, nghĩa là sẽ không thay đổi được giá trị của biến.
Với var và let, chúng ta đều có thể khai báo được 1 biến bất kỳ, biến này có thể thay đổi được giá trị. Điểm khác biệt giữ var và let đó là:
Từ đó chúng ta có thể thấy trong các ứng dụng RN sẽ ưu tiên sử dụng let nhìu hơn để sourcecode chặt chẽ hơn và không bị các lỗi không mong muốn.

Arrow function

Arrow function cũng như function bình thường, chỉ khác về syntax và binding context:

Ngoài ra các bạn có thể xem thêm arrow function tại đây.

Module import / export

Ứng dụng RN thường được phát triển trên nhiều file JS mà ta thường gọi là các module / component. Tất cả các biến và function trong 1 file JS sẽ chỉ được truy xuất trong file (hay còn gọi là file private). Để cho phép các thành phần có thể sử dụng từ các file khác, chúng ta cần dùng tới từ khoá export và import.

Function Parameter: default và rest

Object/Array Matching, Short Hand Notation

 

Spread Operator

Đây là một trong những operator quan trọng chúng ta rất hay dùng trong RN. Trong clip hướng dẫn RN cơ bản mình cũng có demo quản lý style component con với Spread Operator.

String interpolation

Đây là một trong những tính năng của ES6 mà mình rất hay sử dụng.

Classes

Class rất quan trọng trong RN, đây là kỹ thuật chính chúng ta sử dụng để xây dựng các Component. Phần này có liên quan tới OOP khá nhìu nên mình chỉ nói các kỹ thuật chính.

Promise và parallel promise

Việc sử dụng Promise là một giải pháp hiệu qủa khi làm việc với các hàm callback, sourcecode chúng ta sẽ dễ đọc hơn.
Chúng ta có thể sử dụng hàm then như một middleware, ở mỗi bước then ta có thể return để làm tham số cho hàm then tiếp theo.
Chạy cùng lúc nhiều Promise với Promise.all. Việc này rất hiệu quả khi ta cần load 1 lúc nhìu APIs hoặc nhiều async tasks song song.

Async và Await

Thế giới của JS đầy rẫy những callback function và promise, thế nhưng lắm lúc ta lại cần chúng chạy synchonize bình thường, hay nói đúng hơn ta sẵn sàng đợi cho chúng chạy xong. Source code sẽ chạy lần lượt từ trên xuống dưới.
Ở đây ta cần lưu ý: Từ khoá wait chỉ chạy trong function được khai báo với từ khoá async. Vì function này async nên sẽ chạy bất đồng bộ (chạy ở 1 thread khác) nên ở trên ta thấy Run here first sẽ được in ra đầu tiên. Trong function doTask, từ khoá await sẽ khiến doSomething chạy như synchronize (block thread hiện tại để đợi kết quả).

Kết

Việc nắm được các syntax quan trọng trong ES6/7 sẽ hỗ trợ rất nhiều cho chúng ta dev ứng dụng trên React/React Native, source code sẽ dễ đọc và maintain hơn. ES6/7 vẫn còn rất nhìu các tính năng hữu ích, trong một bài viết mình không thể liệt kê ra hết được. Các bạn có thể xem thêm tại:
Techtalk Via FbVietTran
CHIA SẺ