Tổng quan về ES6 cho các nhà phát triển bản địa React

Nếu bạn đến với React Native và bạn

  1. Mới sử dụng JavaScript
  2. Đã quen thuộc với JavaScript nhưng thiên đường đã sử dụng các tính năng ES6 / ES2015 +

sau đó bạn có thể cảm thấy một chút mất mát đôi khi. Cú pháp có thể có vẻ kỳ lạ, khó hiểu hoặc đôi khi bạn chỉ cần không biết những gì cần tìm. I hève đã biên soạn một danh sách ngắn gọn các tính năng ES6 + phổ biến nhất mà tôi thấy trong các ứng dụng và hướng dẫn của React Native. Điều này không có nghĩa là toàn diện nhưng ít nhất nó sẽ giúp bạn bắt đầu.

Biến

Kể từ khi JavaScript ra đời, chúng tôi đã có var. Nhưng bây giờ chúng ta có var, let và const. Tất cả đều hợp lệ nhưng sự khác biệt là gì?

let: Rất giống với var nhưng phạm vi là khác nhau. var là hàm có phạm vi (có sẵn và có thể được sửa đổi ở bất kỳ đâu trong hàm) trong khi đó hãy để khối có phạm vi, nghĩa là nó chỉ khả dụng trong khối mã đó. Tôi luôn luôn sử dụng let thay cho var ngay bây giờ (thật lòng tôi không thể nhớ lần cuối tôi sử dụng var).

const: Tương tự phạm vi (khối) như cho phép nhưng bạn không thể thay đổi giá trị của nó, ví dụ:

const name = 'Spencer';
name = 'Johnny' // Không thể làm điều này

Tuy nhiên (và đây là điều mà tôi đã nhầm lẫn lúc đầu), bạn có thể sửa đổi nó nếu nó là một đối tượng hoặc mảng kiểu, ví dụ:

thông tin const = {
  tên: 'Spencer',
  công ty: 'Phòng thí nghiệm tay cầm',
};
info.job = 'Dạy'; // Điều này là hoàn toàn hợp lệ
const vai trò = ['Học sinh', 'Giáo viên'];
vai trò.push ('Nhà phát triển'); // Tốt để đi!

Muốn biết thêm thông tin?

  • để cho
  • ch

Chức năng mũi tên

Cú pháp

Bây giờ, có một cách mới để khai báo các hàm trong JavaScript được gọi là các hàm mũi tên và bạn sẽ thấy những điều này rất nhiều khi làm việc với React hoặc React Native. Sự khác biệt chính giữa các chức năng tiêu chuẩn / cũ và chức năng mũi tên là những gì điều này bị ràng buộc, vì vậy đôi khi bạn sẽ muốn / cần sử dụng chức năng. Tạo một hàm mũi tên rất đơn giản

const chào = (tên) => {
  trả về 'Xin chào,' + tên + '!';
};
chào ('Spencer'); // Xin chào, Spencer!

Tìm hiểu thêm về cú pháp hàm mũi tên

Định dạng đối số

Với các hàm mũi tên, bạn có thể định dạng các hàm mũi tên theo một số cách khác nhau, tất cả đều được sử dụng phổ biến. Đây là ba quy tắc mà tôi đã cam kết ghi nhớ.

1. Không cần đối số = dấu ngoặc đơn

const chào = () => {
  trở lại 'Chào!';
};

2. Một đối số = dấu ngoặc đơn tùy chọn

const chào = (tên) => {
  trả về 'Xin chào,' + tên + '!';
};
const chào = tên => {
  trả về 'Xin chào,' + tên + '!';
};

3. Hai hoặc nhiều đối số = yêu cầu dấu ngoặc đơn

const chào = (tên, công ty) => {
  trở lại 'Xin chào,' + tên + '!' + 'Làm thế nào là' + công ty + '?';
};

Tìm hiểu thêm về định dạng đối số

Đối số mặc định

Đây là một trong những mục yêu thích của tôi - một cách cực kỳ đơn giản để đặt các đối số mặc định cho các hàm của bạn bằng cách chỉ định chúng cho một giá trị khi đặt tên cho đối số. Nếu đối số được thông qua, nó sẽ sử dụng đối số bạn vượt qua, nếu không nó sẽ trở về mặc định.

const chào = (tên = 'Bạn bè') => {
  trả về 'Xin chào,' + tên + '!';
};
chào (); // Chào bạn!
chào ('Spencer'); // Xin chào, Spencer!

Tìm hiểu thêm về đối số mặc định

Hoàn trả

Có một chức năng đơn giản và chán ngấy khi viết niềng răng và trả lại? Đừng băn khoăn nữa! Bây giờ bạn có thể hoàn toàn quay trở lại từ một chức năng, như vậy

const chào = (tên) => 'Xin chào,' + tên + '!';
chào ('Spencer'); // Xin chào, Spencer!

Tổ hợp phím đã lưu Mmm

Nó trở nên tốt hơn mặc dù! Giả sử bạn muốn trả về một đối tượng từ một hàm, bạn có thể làm như vậy (bạn sẽ thường thấy điều này khi làm việc với Redux)

const getInfo = () => ({
  tên: 'Spencer',
  công ty: 'Phòng thí nghiệm tay cầm',
  công việc: 'Dạy học',
});
nhận thông tin(); // {name: 'Spencer', công ty: 'Phòng thí nghiệm tay cầm', công việc: 'Dạy học'}

(chú ý dấu ngoặc đơn bao bọc đối tượng)

Và cuối cùng, bạn cũng có thể trả về một thành phần theo cách rất giống với đối tượng, hãy để tôi chứng minh

const Chúc mừng = ({name}) => (
  
     Xin chào, {name}! 
  
);

Một lần nữa, chúng tôi quấn gói thành phần bằng dấu ngoặc đơn và chúng tôi không thể thực hiện bất kỳ trả lại nào.

Tìm hiểu thêm về lợi nhuận ngầm

Các đối tượng

Hiện tại, chúng tôi đã có một vài công cụ rất thuận tiện (trước đây cần có một thư viện bên ngoài) để làm việc với các đối tượng trong JavaScript dễ dàng hơn.

Phá hủy

Phá hủy cấu trúc cho phép chúng ta phá hủy cấu trúc, hoặc phá vỡ một đối tượng để chúng ta có thể dễ dàng truy cập thông tin mà chúng ta quan tâm hơn. Hãy để chúng tôi nói rằng chúng tôi muốn truy cập một số dữ liệu trên một đối tượng, trước đây chúng tôi sẽ phải làm như sau

thông tin const = {
  tên: 'Spencer',
  công ty: 'Phòng thí nghiệm tay cầm',
  vị trí: {
    thành phố: 'Nashville',
    tiểu bang: 'Tennessee',
  },
};
tên const = thông tin.name;
const city = info.location.city;
const state = info.location.state;

Điều đó rất tốt nhưng giờ chúng tôi có thể tiết kiệm một chút thời gian để xác định các biến truy cập thông tin mà chúng tôi quan tâm. Khi bạn sử dụng các đạo cụ xung quanh ứng dụng React Native, nó có một số dữ liệu lồng nhau và như chúng ta thấy với thành phố và tiểu bang, cuối cùng chúng ta viết rất nhiều mã giống nhau. Bạn có thể phá hủy cấu trúc đối tượng đó để dễ dàng truy cập dữ liệu hơn.

thông tin const = {
  tên: 'Spencer',
  công ty: 'Phòng thí nghiệm tay cầm',
  vị trí: {
    thành phố: 'Nashville',
    tiểu bang: 'Tennessee',
  },
};
const {tên, địa điểm} = thông tin;
const {thành phố, tiểu bang} = vị trí;
// tên là Spencer
// thành phố là Columbia
// tiểu bang là Tennessee

Bạn có thể thấy điều này khi truy cập thông tin từ các đạo cụ, như thế này:

const Thông tin = ({tên, vị trí}) => (
  
     {name} sống ở {location.city}, {location.state} 
  
);

Tìm hiểu thêm về phá hủy đối tượng

Lan tràn

Đối tượng trải rộng cho phép chúng ta sao chép thông tin từ đối tượng này sang đối tượng khác. Đó là một cách thực hành mà bạn sẽ thấy khi sử dụng Redux vì cần các chức năng thuần túy. Hãy nói rằng chúng tôi có nhiều người làm việc tại Phòng thí nghiệm của Handbar và tất cả họ đều có một số thông tin cơ bản giống nhau. Để tiết kiệm thời gian, chúng tôi sẽ sao chép thông tin đó từ mẫu của Google vào một thông tin cá nhân.

const handbarLabsInfo = {
  công ty: 'Phòng thí nghiệm tay cầm',
  vị trí: {
    thành phố: 'Nashville',
    tiểu bang: 'Tennessee',
  },
};
const spencerInfo = {
  ... tay cầmLabsInfo,
  tên: 'Spencer',
}
console.log (spencerInfo); // {name: 'Spencer', công ty: 'Phòng thí nghiệm tay cầm', địa điểm: {city: 'Nashville', bang: 'Tennessee'}}

Tìm hiểu thêm về lây lan đối tượng

Dây

Văn mẫu

Một yêu thích cá nhân khác của tôi. Lưu ý cách sớm hơn hoặc trong bất kỳ mã / hướng dẫn cũ nào của bạn, bạn thấy 'Xin chào,' + name + '!' + 'Làm thế nào là' + công ty + '?'? Những dấu + đó có thể là một nỗi đau để viết và cá nhân tôi biết rằng tôi sẽ luôn quên một khoảng trắng, do đó làm cho định dạng bị tắt. Mẫu chữ giúp chúng ta dễ dàng hơn vì chúng ta có thể viết các chuỗi tự nhiên hơn với nội dung động.

Bằng cách sử dụng các dấu kiểm ngược (``) để xác định chuỗi, sau đó chúng ta có thể chuyển các biến với $ {}. Hãy để tôi chỉ cho bạn ...

const chào = (tên, công ty) => {
  // trả về 'Xin chào,' + tên + '!' + 'Làm thế nào là' + công ty + '?';
  trả lại `Xin chào, $ {name}! $ {Công ty} như thế nào? `;
};

Tốt hơn nhiều

Tìm hiểu thêm về mẫu chữ

Mô-đun

Đối với những người lần đầu tiên nhảy qua React Native, điều này có thể gây nhầm lẫn. Bạn có thể đã từng thấy

export.greet = (name) => 'Xin chào,' + name + '!';
// HOẶC LÀ
module.exports = (name) => 'Xin chào,' + name + '!';

và tương tự như vậy để thực sự sử dụng mã đó:

const thủ tục = yêu cầu ('./ thủ tục');
thủ tục.greet ();
const hello = Yêu cầu ('./ thủ tục');
chào ();

Bây giờ chúng tôi có quyền truy cập vào một cú pháp mô-đun khác để tận dụng các từ khóa nhập và xuất. Hãy chuyển đổi khối xuất khẩu đầu tiên đó.

export const hello = (name) => 'Xin chào,' + name + '!';
// HOẶC LÀ
xuất lời chào mặc định;

Sau đó, để truy cập mã đó, chúng tôi có thể sử dụng

nhập {lời chào} từ './formalities';
// HOẶC LÀ
nhập lời chào từ './formalities';

Điều tuyệt vời là chúng ta có thể sử dụng cả xuất và xuất mặc định cùng nhau. Có nhiều hơn nữa bạn có thể làm với các mô-đun ES6 và tôi chắc chắn sẽ khuyến khích bạn kiểm tra nó. yêu cầu vẫn có vị trí của nó nhưng tôi hiếm khi sử dụng chúng bây giờ

  • Tìm hiểu thêm về nhập khẩu
  • Tìm hiểu thêm về xuất khẩu

Kết thúc

Có rất nhiều thứ tuyệt vời trong ES6 và hơn thế nữa, phần lớn tôi đã làm ở đây. Đây chỉ là những cái phổ biến nhất mà tôi thấy trong sử dụng. Tôi đã quên một cái gì đó? Cho tôi biết!

Muốn có thêm nội dung liên quan đến React Native? Đăng ký danh sách email của tôi hoặc đưa phần giới thiệu của tôi vào khóa học React Native (nó miễn phí!).