HomeLập trìnhJavaScriptCác khái niệm...

Các khái niệm JavaScript bạn nên biết trước khi học React


React là một trong những khung JavaScript phổ biến nhất để xây dựng các ứng dụng trang đơn. Không cần phải nói, là một khung JavaScript, nó yêu cầu bạn phải có kiến ​​thức tốt về các khái niệm JavaScript.

Trong bài viết này, chúng ta sẽ xem xét một số khái niệm JavaScript mà bạn phải biết trước khi học React. Hiểu rõ về các chủ đề này là nền tảng trong việc xây dựng các ứng dụng React quy mô lớn. Vì vậy, không có gì khó chịu, hãy bắt đầu.

1. Cơ bản về JavaScript

React là một khung công tác JS và bạn sẽ sử dụng JavaScript rộng rãi trong mã React của mình. Vì vậy, không có gì phải bàn cãi khi bạn phải biết các khái niệm JavaScript cơ bản.

Về cơ bản, ý tôi là những thứ như biến, kiểu dữ liệu, toán tử, điều kiện, mảng, hàm, đối tượng, sự kiện, v.v.

Hiểu đúng về các khái niệm này là rất quan trọng để bạn điều hướng chính xác trong React, vì bạn sẽ sử dụng chúng trong mọi bước khi xây dựng ứng dụng React.

Vì vậy, nếu bạn không chắc chắn về những điều này hoặc muốn nhanh chóng sửa lại mọi thứ một lần nữa, hãy xem một số khóa học miễn phí này hoặc giáo trình JavaScript freeCodeCamp. Tài liệu MDN và JavaScript.info cũng là những tài liệu tham khảo tìm kiếm nhanh hữu ích.

2. Toán Tử Bậc Ba

Toán tử bậc ba là toán tử điều kiện ngắn, một dòng để thay thế if/else. Nó thực sự hữu ích khi cần kiểm tra nhanh một điều kiện để hiển thị một thành phần, cập nhật trạng thái hoặc hiển thị một số văn bản.

Hãy so sánh cách Toán tử bậc ba hoạt động với câu lệnh If/Else:

// Example of Ternary Operator
condition ? 'True' : 'False'
// Example of If/Else statement
if(condition) {
    'True'
}
else {
    'False'
}:

Bạn có thể tự mình thấy mức độ sạch hơn và ngắn hơn khi sử dụng Toán tử Ternary so với sử dụng If/Else.

Cách nó hoạt động là bạn viết một điều kiện và nếu điều kiện đó đúng, chương trình của bạn sẽ thực hiện câu lệnh sau ?. Nếu điều kiện sai chương trình sẽ thực hiện câu lệnh sau :

Đơn giản phải không nào?

3. Phá hủy

Việc hủy cấu trúc giúp chúng ta giải nén các giá trị khỏi mảng và đối tượng và gán chúng cho các biến riêng biệt một cách đơn giản và mượt mà. Hãy hiểu nó với một số mã:

// With Destructuring
const objects = ['table', 'iPhone', 'apple']
const [furniture, mobile, fruit] = objects

// Without Destructuring
const furniture = objects[0]
const mobile = objects[1]
const fruit = objects[2]

Trong ví dụ trên, Destructuring đã tiết kiệm cho chúng ta 3 dòng mã và làm cho mã sạch hơn. Bây giờ hãy xem một ví dụ khác về việc truyền props trong React bằng cách hủy:

// With Destructuring Ex-1
function Fruit({apple}) {
    return (
        <div>
            This is an {apple}
        </div>
    )
}

// With Destructuring Ex-2

function Fruit(props) {
    const {apple, iphone, car} = props
    return (
        <div>
            This is an {apple}
        </div>
    )
}

// Without Destructuring
function Fruit(props) {
    return (
        <div>
            This is an {props.apple}
        </div>
    )
}

Lưu ý cách bạn phải sử dụng props lặp đi lặp lại khi bạn không sử dụng phá hủy trong đạo cụ của mình.

Việc hủy cấu trúc làm cho mã của chúng tôi sạch hơn và giúp chúng tôi không phải sử dụng từ khóa đạo cụ mỗi khi bạn sử dụng một biến prop. Còn nhiều thứ khác để phá hủy và bạn sẽ học được những điều đó khi bắt đầu xây dựng ứng dụng bằng JavaScript và React.

Đọc thêm  Cómo crear el juego de la serpiente en JavaScript

4. Toán tử Spread

Toán tử trải rộng đã được giới thiệu với JavaScript trong ES6. Nó nhận một iterable và mở rộng nó thành các phần tử riêng lẻ.

Một trường hợp sử dụng phổ biến của toán tử trải rộng trong React là sao chép các giá trị của một đối tượng sang một đối tượng khác trong quá trình cập nhật trạng thái để hợp nhất các thuộc tính của cả hai đối tượng. Nhìn vào cú pháp dưới đây:

const [person, setPerson] = useState({
    id: '',
    name: '',
    age: ''
});

 setPerson([
            ...person,
            {
                id:"1",
                name: "Steve",
                age:"25"
            }
        ]);

Trong ví dụ trên, ...person sao chép tất cả các giá trị của đối tượng người trong đối tượng trạng thái mới, sau đó được thay thế thêm bằng các giá trị tùy chỉnh khác có cùng thuộc tính, cập nhật đối tượng trạng thái.

Đây là một trong nhiều trường hợp sử dụng của toán tử trải rộng trong React. Khi ứng dụng của bạn trở nên lớn hơn, các công cụ như toán tử trải phổ sẽ có ích để xử lý dữ liệu theo cách tốt hơn và hiệu quả hơn.

5. Phương thức mảng

Các phương thức mảng rất phổ biến khi xây dựng một ứng dụng quy mô vừa đến lớn trong React. Bạn sẽ luôn sử dụng một số loại phương thức mảng trong hầu hết mọi ứng dụng React mà bạn xây dựng.

Vì vậy, hãy dành chút thời gian để tìm hiểu những phương pháp này. Một số phương pháp cực kỳ phổ biến như bản đồ(). Bạn sử dụng map() mỗi khi tìm nạp dữ liệu từ tài nguyên bên ngoài để hiển thị trên giao diện người dùng.

Có các phương pháp khác như lọc, rút ​​gọn, sắp xếp, bao gồm, tìm, forEach, nối, nối, đẩy và bật, dịch chuyển và bỏ dịch chuyển, v.v.

Một số trong số chúng được sử dụng phổ biến và một số sẽ hiếm khi được sử dụng. Điều quan trọng là phải hiểu rất rõ các phương thức mảng phổ biến và chỉ cần lưu ý đến sự tồn tại của các phương thức khác để bất cứ khi nào bạn cần chúng, bạn có thể nhanh chóng tìm hiểu chúng.

Đây là sổ tay hữu ích về phương thức mảng và cách làm việc với mảng nói chung trong JavaScript để bạn có thể tìm hiểu thêm.

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

Các hàm mũi tên cho phép chúng ta tạo các hàm một cách đơn giản với cú pháp ngắn hơn.

// Regular Functions
function hello() {
    return 'hello'
}

// Arrow Functions
let hello = () => 'hello'

Cả hai hàm trong đoạn mã trên đều hoạt động như nhau, nhưng bạn có thể thấy rằng hàm mũi tên gọn gàng và ngắn gọn hơn nhiều. Trống () trong cú pháp trên là dành cho đối số. Ngay cả khi không có đối số, các dấu ngoặc này phải có mặt.

Tuy nhiên, bạn có thể bỏ qua các dấu ngoặc này nếu chỉ có một đối số trong hàm, như sau:

let square = num => num * num

Trong các chức năng mũi tên một dòng, bạn có thể bỏ qua trở lại bản tường trình. Bạn cũng có thể khai báo một hàm mũi tên nhiều dòng bằng cách sử dụng dấu ngoặc nhọn {} tương tự như các hàm thông thường.

let square = num => {
    return num * num
}

7. Lời hứa

Bạn sử dụng lời hứa để xử lý các hoạt động không đồng bộ trong JavaScript hiện đại. Sau khi bạn tạo một lời hứa trong JavaScript, nó có thể thành công hoặc thất bại – được gọi là được giải quyết hoặc bị từ chối trong thuật ngữ JavaScript.

Đọc thêm  Cách sử dụng API yêu cầu thanh toán trong JavaScript

Những lời hứa trong JavaScript, theo một cách nào đó, cũng có thể được so sánh với những lời hứa mà con người chúng ta đưa ra. Giống như lời hứa của con người được thúc đẩy bởi việc triển khai một hành động nhất định trong tương lai, lời hứa trong JavaScript là về việc triển khai mã trong tương lai, dẫn đến việc nó được giải quyết hoặc bị từ chối.

Có 3 trạng thái của một lời hứa:

  1. Chưa giải quyết – Khi kết quả cuối cùng của lời hứa vẫn chưa được xác định.
  2. giải quyết – Khi lời hứa được giải quyết thành công
  3. Vật bị loại bỏ – Khi lời hứa bị từ chối.

Khi một lời hứa được giải quyết thành công hoặc bị từ chối, bạn có thể sử dụng một .sau đó() hoặc .nắm lấy() phương pháp trên đó.

  • Các .sau đó() phương thức được gọi khi một lời hứa được giải quyết hoặc bị từ chối. Nó nhận 2 hàm gọi lại làm đối số. Cái đầu tiên được thực thi khi lời hứa được giải quyết và nhận được kết quả, và cái thứ hai là một đối số tùy chọn trong trường hợp lời hứa bị từ chối.
  • Các .nắm lấy() được sử dụng làm trình xử lý lỗi và được gọi khi lời hứa bị từ chối hoặc có lỗi khi thực thi.

Lý thuyết đủ rồi, hãy kết thúc phần này bằng một ví dụ về lời hứa, bao gồm cả việc sử dụng .then().catch() phương pháp:

let promise = new Promise((resolve, reject) => {
  const i = "Promise";
  i === "Promise" ? resolve() : reject(); // Checkout the above Ternary Operator section to better understand the syntax
  }
);

promise.
    then(() => {
        console.log('Your promise is resolved');
    }).
    catch(() => {
        console.log('Your promise is rejected');
    });

8. API tìm nạp

Fetch API cho phép chúng tôi thực hiện các yêu cầu không đồng bộ tới máy chủ web từ trình duyệt. Nó trả về một lời hứa mỗi khi một yêu cầu được thực hiện, sau đó được sử dụng thêm để truy xuất phản hồi của yêu cầu.

Hàm tìm nạp() cơ bản nhận một đối số, URL của tài nguyên mà bạn muốn tìm nạp. Sau đó, nó trả về một lời hứa khác giải quyết bằng một Response vật. Cái này Phản ứng đối tượng là đại diện của phản hồi HTTP.

Vì vậy, để lấy nội dung JSON từ lời hứa này, bạn phải sử dụng .json() phương thức trên đối tượng Response. Điều này cuối cùng sẽ trả về một lời hứa giải quyết với kết quả của dữ liệu JSON được phân tích cú pháp từ nội dung phản hồi.

Nó có thể hơi khó hiểu, vì vậy hãy chú ý đến ví dụ dưới đây:

fetch('http://example.com/books.json') // fetching the resource URL
  .then(response => response.json()); // calling .json() method on the promise
  .then(data => setState(data)); // updating the state with the JSON data

9. Không đồng bộ/Đang chờ

Chức năng Async/Await cung cấp một cách tốt hơn và rõ ràng hơn để xử lý các Promise. Về bản chất, JavaScript là đồng bộ và async/await giúp chúng ta viết các hàm dựa trên lời hứa theo cách như thể chúng đồng bộ bằng cách dừng thực thi mã tiếp theo cho đến khi lời hứa được giải quyết hoặc từ chối.

Đọc thêm  Gửi dữ liệu giữa máy chủ và máy khách trong Node.js và Javascript

Để làm cho nó hoạt động, trước tiên bạn phải sử dụng không đồng bộ từ khóa trước khi khai báo hàm. Ví dụ, async function promise() {}. Đặt không đồng bộ trước một chức năng có nghĩa là chức năng sẽ luôn trả về một lời hứa.

Bên trong một chức năng không đồng bộ, bạn có thể sử dụng từ khóa await để tạm dừng việc thực thi mã tiếp theo cho đến khi lời hứa đó được giải quyết hoặc bị từ chối. Bạn có thể dùng chờ đợi chỉ bên trong một không đồng bộ chức năng.

Bây giờ, hãy nhanh chóng kết thúc phần này bằng một ví dụ:

async function asyncFunction() {
    let promise = new Promise(resolve => {
        resolve();
    });
    let response = await promise; // further execution will be stopped until the promise is resolved or rejected
    return console.log(response);
}

Bạn có thể tìm hiểu thêm về không đồng bộ và chờ đợi trong hướng dẫn chuyên sâu này.

10. Mô-đun ES và Nhập/Xuất

Các mô-đun đã được giới thiệu bằng JavaScript trong ES6. Mỗi tệp là một mô-đun của riêng nó. Bạn có thể thực hiện các đối tượng, biến, mảng, hàm, v.v. từ một tệp và sử dụng chúng trong một tệp khác. Điều này được gọi là nhập và xuất các mô-đun.

Trong React, chúng tôi sử dụng các mô-đun ES6 để tạo các tệp riêng biệt cho các thành phần. Mỗi thành phần được xuất ra khỏi mô-đun của nó và được nhập vào tệp mà nó sẽ được hiển thị. Hãy tìm hiểu điều này với một ví dụ:

function Component() {
    return(
        <div>This is a component</div>
    )
}

export default Component
import Component from './Component'

function App() {
    return (
        <Component />
    )
}

Trong React, bạn phải kết xuất mọi thành phần mà bạn khai báo trong thành phần App.js.

Trong ví dụ trên, chúng tôi đã tạo một thành phần có tên là Thành phần và xuất nó với mã của chúng tôi export default Component. Tiếp theo, chúng ta đi đến App.js và nhập khẩu Thành phần với đoạn mã sau: import Component from './Component'.

Phần kết luận

Bạn đã đến cuối bài viết! Cho đến nay, chúng ta đã đề cập đến những kiến ​​thức cơ bản về JavaScript bao gồm Toán tử bậc ba, Phá hủy, Toán tử trải rộng, Phương thức mảng, Hàm mũi tên, Lời hứa, API tìm nạp, Mô-đun Async/Await và ES6 và Nhập/Xuất.

Tôi hy vọng bạn đã học được nhiều điều từ bài viết này và hiểu một số khái niệm JavaScript quan trọng cũng như lý do tại sao bạn cần tìm hiểu kỹ về chúng trước khi chuyển sang React.

Bài viết này không phải là một giải pháp thay thế cho việc tự học các khái niệm này một cách thấu đáo. Tôi chỉ giới thiệu chung về chúng và tại sao chúng lại quan trọng. Bây giờ tùy thuộc vào cách bạn học những điều này và xây dựng kiến ​​thức của bạn từ đây. Chúc may mắn với cuộc hành trình!

Bạn có thể sử dụng các tài nguyên xuyên suốt bài viết để tìm hiểu sâu hơn về các khái niệm quan trọng này.

Kiểm tra blog của tôi để đọc nội dung chất lượng hơn như thế này. Liên hệ với tôi trên Twitter nếu bạn có câu hỏi muốn hỏi hoặc muốn nói ‘xin chào’.





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