[Series es6 vs react] - Làm rõ về es6 và react native! Phần 1.

Nội dung bài viết

Video học lập trình mỗi ngày

Hiện tại có rất nhiều bạn đang chuyển qua phát triển React Native nên mình có đôi điều để trao đổi trong bài viết này. Vâng, bạn có thể tìm hiểu tất tần tật về javascript (es6) trước khi bạn tham gia vào React. Nhưng tôi đoán cho dù bạn có tìm hiểu sâu và nhiều đi chăng nữa thì tôi nghĩ sẽ có nhiều thiếu sót. Bởi vì việc check hết tất cả các method, function của javascript là mất rất nhiều thời gian và công sức. Vậy cho nên mình có viết đôi điều trước khi bạn tham gia React một cách thoải mái nhất.

Trước tiên khi bạn đến với React Native thì bạn là:

+ Mới học về javascript?

+ Đã quá quen thuộc với javascript và thường xuyên sử dụng các tính năng ES6 / ES2015.

Vậy thì có thể bài này đã lấy đi chút ít thời gian lãng phí của bạn và bạn có thể bỏ qua bài viết này. Có nhiều cú pháp có thể có vẻ kỳ lạ, khó hiểu hoặc đôi khi bạn không biết những gì cần tìm.

Cho nên mình đã tham khảo và đã liệt kê một danh sách ngắn gọn các tính năng ES6 + phổ biến nhất mà mình thấy trong các ứng dụng và hướng dẫn của React Native. Có thể các liệt kê không hoàn toàn hoàn hảo nhưng mình nghĩ nó sẽ ít nhất giúp các bạn khi bắt đầu với React.

Do có quá nhiều cái để viết cho các bạn thật sử hiểu nên ở ở phần 1 này mình sẽ giới thiệu trước về 4 tính năng trước cho các bạn dễ hình dung hơn, bới vì những tính năng này rất cơ bản.

1 - Immutability - tính bất biến

Khi làm việc với React hay javascript, hẳn bạn đã nghe đến tính bất biến của dữ liệu (immutability). Hiểu nôm na là khả năng giá trị của dữ liệu không bị thay đổi sau khi đã được khai báo. Tính bất biến giúp cho chương trình trở nên dễ dự đoán, ít xảy ra lỗi và trong một số trường hợp còn tăng hiệu suất của ứng dụng.

Do đó, React (và Redux) đều để hướng đến tính năng này. Nếu mới làm quen với JavaScript và React thì bạn có thể xem ví dụ sau, và ở đây mình chỉ nói đến thao tác trên object:

Như vậy để thay đổi giá trị của object mà vẫn đảm bảo tính chất bất biến, chúng ta cần sử dụng Object.assign(target, ...sources).

Hàm này có tác dụng sao chép thuộc tính của các đối tượng sources vào target. Ví dụ như:

 const a = { name: 'foo' }
 const b = Object.assign({}, a, { name: 'bar', age: 1 }, { id: 9 })
 console.log(b) // { name: 'bar', age: 1, id: 9 }

Tính bất biến rất sâu rộng cho nên chúng ta chỉ dừng ở keyword. Nếu các bạn có tìm hiểu thêm thì tham khảo thêm tại đây: https://itnext.io/immutable-vs-immutable-js-d524bf515bcd

2 - Formatting tham số.

+ Không có tham số nào = dấu () bắt buộc

   const greet = () => {
     return 'Hi!';
   };

+ Nếu có 1 tham số = dấu () không bắt buộc

   const greet = (name) => {
     return 'Hello, ' + name + '!';
   };
   const greet = name => {
     return 'Hello, ' + name + '!';
   };

+ Nếu có 2 or nhiều hơn tham số = dấu () bắt buộc

const greet = (name, company) => {
  return 'Hello, ' + name + '!' + 'How is ' + company + '?';
};

3 - Module.

Thật ra chúng ta có thể thấy những module quen thuộc hằng ngày với javascript. với javascript:

   exports.greet = (name) => 'Hello, ' + name + '!';
   // OR
   module.exports = (name) => 'Hello, ' + name + '!';

   Cách sử dụng như thế này.

   const formalities = require('./formalities');
   formalities.greet();
   const greet = require('./formalities');
   greet();

Nhưng có thể lạ lẫm với react đối với các bạn mới vào nghề. Lấy ví dụ trên nhưng ở react thì như thế nào?

  export const greet = (name) => 'Hello, ' + name + '!';
  // OR
  export default greet;

Thì react lại sử dụng như thế này.

  import { greet } from './formalities';
  // OR
  import greet from './formalities';

Qua tính năng này các bạn cũng phải hiểu thật sự về import và export. Chú ý nhớ đọc thêm import và export.

4 - destructuring assignment

Một trong những cú pháp mới hữu ích nhất được giới thiệu trong ES6, destructuring assignment chỉ đơn giản là sao chép một phần của đối tượng hoặc mảng và đặt chúng vào các biến được đặt tên. Một ví dụ nhanh:

 const developer = {
  firstName: 'Cristian',
  lastName: 'Ronaldo',
  developer: true,
  age: 25,
}

Thay vì các bạn mới sẽ sử dụng như thế này

const firstName = developer.firstName;
const lastName = developer.lastName;
console.log(firstName); // returns 'Cristian'
console.log(lastName); // returns 'Ronaldo'

Thì chúng ta sẽ sử dụng destructuring assignment để lấy ra những phần tử như trên

const { firstName, lastName } = developer;
console.log(firstName); // returns 'Cristian'
console.log(lastName); // returns 'Ronaldo'
console.log(developer); // returns the object

Và với React thì các bạn nhìn thoáng qua thì cũng hiểu, react được xây dựng trên ý tưởng es6 không?

const Info = ({ firstName, lastName,  developer}) => (
  <View>
    <Text>{firstName} { lastName} is {developer.developer}</Text>
  </View>
);

Trước hết ở phần 1 này mình chỉ liệt kê những tính năng kể trên. Có rất nhiều thứ tuyệt vời trong ES6 và hơn thế nữa, và phần lớn là mình cũng đã show ở đây. Đây chỉ là những cái phổ biến nhất mà tôi đã sử dụng. Cảm ơn các bạn đón đọc, và đừng quên đọc tiếp phần2 sẽ ra sớm thôi [Series es6 vs react] - Làm rõ về es6 và react native! Phần 2.

Cảm ơn cộng đồng javascript,.