HomeLập trìnhJavaScriptCách sử dụng...

Cách sử dụng các tính năng ES6 trong React


Nhiều khung JavaScript sử dụng các tính năng của ES6. Vì vậy, để giúp bạn tìm hiểu các tính năng tiện dụng này, tôi sẽ giới thiệu cho bạn về chúng và sau đó chỉ cho bạn cách áp dụng chúng trong React.js.

Dưới đây là các tính năng của ES6 mà chúng tôi sẽ giới thiệu trong hướng dẫn này:

  • mô-đun
  • hủy diệt
  • Toán tử lây lan
  • chức năng mũi tên
  • chữ mẫu

Tất cả các ví dụ chúng ta sẽ thấy ở đây đều khá cơ bản và sẽ dễ dàng cho người mới bắt đầu nắm bắt.

Cách sử dụng các mô-đun ES6

Các mô-đun giúp bạn phân chia các chức năng khác nhau của ứng dụng thành các tệp/tập lệnh riêng biệt. Bạn có thể có các tập lệnh khác nhau để xác thực biểu mẫu, đăng nhập người dùng, v.v.

Ở đây, chúng ta sẽ có hai tập lệnh: một để cộng các số và một để trừ các số. Chúng tôi sẽ thực hiện từng bước một.

Đây là cấu trúc của thư mục của chúng tôi:

index.html
script.js
myModules/
add.js
sub.js

Đầu tiên chúng ta sẽ xem cách sử dụng các mô-đun trong vanilla JavaScript. Sau đó, chúng ta sẽ xem cách áp dụng chúng trong React.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ES6 Modules</title>
</head>
<body>
    <script type="module" src="https://www.freecodecamp.org/news/how-to-use-es6-javascript-features-in-react/script.js"></script>
</body>

Bạn sẽ nhận thấy rằng thẻ script có một type trong đó có giá trị của module. Đó phải là điều đầu tiên bạn làm nếu định sử dụng tính năng Mô-đun.

Bạn có thể bắt gặp các tài nguyên sử dụng một phương pháp khác như thêm một .mjs phần mở rộng vào tệp của họ, nhưng để đảm bảo an toàn, tôi khuyên dùng phương pháp này. Các script.js sẽ đóng vai trò là “tập lệnh gốc” mà chúng tôi sẽ nhập các mô-đun của mình vào.

Bước 2 – Tạo và xuất các hàm thành các tệp riêng biệt

Đây là chức năng để thêm vào add.js:

export function add(a, b){
    return a + b;
}

Đây là chức năng cho phép trừ trong sub.js:

export function sub(a, b){
    return a - b;
}

bạn có nhận thấy export bản tường trình? Để có thể sử dụng các chức năng này trong các tập lệnh khác, bạn phải xuất chúng bằng cách thêm export bản tường trình.

Đọc thêm  Cách tạo số ngẫu nhiên trong phạm vi nhất định trong JavaScript

Ở đây, chúng tôi đã sử dụng tính năng xuất nội tuyến bằng cách thêm câu lệnh trước hàm – nhưng bạn có thể chọn xuất hàm này ở cuối tài liệu như sau: export default add;.

Bước 3 – Nhập các chức năng vào script.js

import { add } from "./myModules/add.js";
import { sub } from "./myModules/sub.js"

console.log(add(6, 4)); // 10

console.log(sub(6, 4));  // 2

Để nhập khẩu add chức năng, trước tiên chúng tôi gõ import theo sau là tên của hàm được lồng trong dấu ngoặc nhọn và sau đó là đường dẫn đến tệp chứa hàm đó.

Bạn có thể thấy cách chúng tôi sử dụng add(6, 4); mà không cần phát minh lại bánh xe bằng cách tạo chức năng từ đầu. Bây giờ bạn có thể nhập chức năng này vào bất kỳ tập lệnh nào bạn muốn.

Bước 4 – Cách áp dụng các mô-đun trong React.js

Bây giờ bạn đã thấy cách chúng ta có thể sử dụng các mô-đun trong vanilla JavaScript, hãy xem cách bạn có thể sử dụng chúng trong ứng dụng React.

Khi bạn tạo một ứng dụng React, App.js thành phần thường đóng vai trò là thành phần chính. Chúng ta sẽ tạo một thành phần khác gọi là User.js với một số nội dung về một người dùng.

Đây là App.js thành phần:

function App() {
  return (
    <div className="App">
      
    </div>
  )
}

export default App

Thành phần này chỉ có một div mà không có bất kỳ nội dung.

Và đây là User.js thành phần:

function User() {
    return (
        <div>
            <h1>My name is Ihechikara.</h1>
            <p>I am a web developer.</p>
            <p>I love writing.</p>
        </div>
    )
}

export default User

Nếu bạn có thể nhớ lại, bạn có thể xuất các chức năng của mình ở cuối tập lệnh như chúng tôi vừa làm. Tiếp theo, chúng ta sẽ nhập chức năng này vào App.js thành phần:

import User from "./User"

function App() {
  return (
    <div className="App">
      <User/>
    </div>
  )
}

export default App

Chỉ cần hai bổ sung cho kịch bản: import User from "./User" trỏ đến vị trí của thành phần và <User/> là chính thành phần đó.

Bây giờ bạn có thể sử dụng lại logic trong User.js thành phần trên ứng dụng của bạn và bạn có thể làm cho ứng dụng năng động hơn bằng cách sử dụng đạo cụ thay vì mã hóa cứng thông tin của người dùng – nhưng điều đó nằm ngoài phạm vi của hướng dẫn này.

Cách sử dụng tính năng hủy cấu trúc ES6

Để phá hủy có nghĩa là phá bỏ cấu trúc của một cái gì đó. Trong JavaScript, cấu trúc này có thể là một mảng, một đối tượng hoặc thậm chí là một chuỗi trong đó các thuộc tính tạo nên cấu trúc sẽ được sử dụng để tạo một cấu trúc mới giống hệt (các thuộc tính có thể được thay đổi).

Đọc thêm  JavaScript String.prototype.match() - Giải thích khớp với các ví dụ - Hướng dẫn

Nếu những điều tôi nói vẫn còn trừu tượng đối với bạn, đừng lo lắng vì bạn sẽ hiểu rõ hơn từ các ví dụ.

Trước ES6, đây là cách bạn trích xuất một số dữ liệu trong JavaScript:

var scores = [500, 400, 300];

var x = scores[0],
    y = scores[1],
    z = scores[2];

    console.log(x,y,z); // 500 400 300

Nhưng trong ES6, sử dụng tính năng hủy, chúng ta có thể làm điều này:

let scores = [500, 400, 300];

let [x, y, z] = scores;

console.log(x,y,z); //500 400 300

Các biến x, y và z sẽ kế thừa các giá trị trong mảng điểm theo thứ tự xuất hiện, vì vậy x = 500, y = 400z = 300. Trong trường hợp tất cả các giá trị trong mảng đã được kế thừa, bất kỳ giá trị nào khác không có giá trị gốc sẽ trả về là không xác định. Đó là:

let scores = [500, 400, 300];

let [x, y, z, w] = scores;

console.log(x,y,z,w); //500 400 300 undefined

Đây là một ví dụ sử dụng các đối tượng:

let scores = {
    pass: 70,
    avg: 50,
    fail: 30
};

let { pass, avg, fail} = scores;

console.log(pass, avg, fail); // 70 50 30

Quá trình này giống như phá hủy mảng.

Đây là một ví dụ khác, nhưng với chuỗi:

let [user, interface] = 'UI';

console.log(user); // U

console.log(interface); // I

Chuỗi được chia thành các chữ cái riêng lẻ và sau đó được gán cho các biến trong mảng.

Cách sử dụng phá hủy trong React.js

Có nhiều tình huống khác nhau mà bạn có thể muốn sử dụng phá hủy trong React. Nhưng một điều rất phổ biến sẽ là với useState cái móc.

import { useState } from 'react';

function TestDestructuring() {
    const [grade, setGrade] = useState('A');
    
    return(
        <>
        
        </>
    )
}

export default TestDestructuring

Ở trên, chúng ta đã tạo một biến hằng grade cùng với chức năng setGrade có mục đích là cập nhật giá trị của biến. Và chúng tôi đặt giá trị của grade thành ‘A’ bằng cách sử dụng phá hủy.

Cách sử dụng Toán tử trải rộng ES6

Toán tử trải rộng ... cho phép bạn sao chép tất cả hoặc một số phần của một mảng, đối tượng hoặc chuỗi vào một mảng, đối tượng hoặc chuỗi khác. Ví dụ:

const collectionOne = [10, 20, 30];
const collectionTwo = [40, 50, 60];

const allCollections = [...collectionOne, ...collectionTwo];

console.log(allCollections); //10, 20, 30, 40, 50, 60

Có thực sự không nhiều cho điều này. Sử dụng ... biểu tượng, tất cả các giá trị của hai bộ sưu tập đầu tiên được gán cho bộ sưu tập thứ ba.

Bây giờ chúng ta có tất cả các bộ sưu tập trong một mảng, chúng ta sẽ sử dụng toán tử trải rộng để sao chép mảng và xuất ra số cao nhất. Đó là:

const allCollections = [10, 20, 30, 40, 50, 60];

const maxNumber = Math.max(...allCollections);
console.log(maxNumber) //60

Cách kết hợp toán tử trải rộng với phá hủy

Trong phần trước, chúng ta đã thấy ứng dụng phá hủy trong JavaScript. Bây giờ, hãy xem cách chúng ta có thể kết hợp phép hủy và toán tử trải rộng:

let scores = [500, 400, 300];

let [x, ...y] = scores;

console.log(x); // 500

console.log(y); // [400, 300]

Ở đây, x biến kế thừa số đầu tiên trong mảng sau đó là y biến trải rộng trên mảng và sao chép mọi thứ còn lại.

Đọc thêm  Giới thiệu về HTML5 Canvas và các hàm JavaScript

Cách sử dụng các hàm mũi tên ES6

Về cơ bản, các hàm mũi tên cho phép chúng ta viết các hàm của mình bằng cú pháp ngắn hơn. Trước ES6, đây là cách bạn viết một hàm:

var greetings = function() {
  console.log("Hello World!")
}

//OR

function greetings2() {
  console.log("HI!")
}

Với ES6, một cú pháp khác đã được giới thiệu:

var greetings = () => {
  console.log("Hello World!")
}

var greetings = () => {
  console.log("HI!")
}

Các function từ khóa đã bị xóa trong khi toán tử mũi tên béo => đã được giới thiệu.

Lưu ý rằng các chức năng mũi tên là ẩn danh.

Cách sử dụng hàm mũi tên có tham số

Các tham số trong các hàm mũi tên được chuyển vào dấu ngoặc đơn đứng trước toán tử mũi tên béo. Ví dụ:

var add = (a,b)=>{
  return a + b;
}
console.log(add(2,2)) //4

Cách sử dụng văn bản mẫu ES6

Chữ mẫu cho phép bạn sử dụng dấu kiểm ngược (“) thay vì dấu ngoặc kép (“”) để xác định chuỗi. Điều này có lợi thế khác nhau.

Trước ES6:

var name = "My name is Ihechikara" 

console.log(fullname);

Với ES6:

var name = `My name is Ihechikara` 

console.log(fullname);

Nội suy trong chữ mẫu

Nội suy chuỗi cho phép bạn bao gồm các biến và câu lệnh trong chuỗi của mình mà không chia nhỏ nó bằng + nhà điều hành. Đó là:

var me="Ihechikara";

var fullname = `My name is Abba ${me}`;

console.log(fullname);

Để nội suy một biến vào chuỗi của bạn, bạn sử dụng ${} với tên của biến được chuyển vào dấu ngoặc nhọn. Luôn nhớ rằng chuỗi của bạn phải được lồng bên trong dấu kiểm ngược chứ không phải dấu ngoặc kép.

Điều tương tự cũng áp dụng khi bạn đang tạo động các phần tử DOM của mình bằng JavaScript. Bạn sẽ làm một cái gì đó như thế này:

let name="Ihechikara";
let myHtmlTemplate = `<h1> This is a paragraph created by ${name}</h1>`;

Phần kết luận

Bài viết này đề cập đến một số tính năng quan trọng nhất của ES6 như mô-đun, phá hủy, toán tử trải rộng, hàm mũi tên và chữ mẫu.

Bạn sẽ thấy các tính năng này được sử dụng thường xuyên trong khi học hoặc hiểu các khung JavaScript, vì vậy nó sẽ giúp bạn nắm bắt được ứng dụng của chúng trong bất kỳ khung nào chúng xuất hiện.

Nếu bạn có bất kỳ câu hỏi nào về các tính năng này, bạn có thể tìm thấy tôi trên Twitter @ihechikara2. Cảm ơn bạn đã đọc!





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status