Con đường phản ứng

Dec 01 2022

React là một trong những thư viện Javascript tốt nhất được sử dụng để xây dựng các ứng dụng web. Để nắm được React, chúng ta cần hiểu cách thức hoạt động đằng sau của nó.

Ảnh của Ksenia Yakovleva trên Bapt

React là một trong những thư viện Javascript tốt nhất được sử dụng để xây dựng các ứng dụng web. Để nắm được React, chúng ta cần hiểu cách thức hoạt động đằng sau của nó. Trong bài viết này, chúng ta hãy xem xét các nguyên tắc cơ bản của React, API React thô, cách nó hoạt động bên trong và cuối cùng là tạo một thành phần React có thể tái sử dụng.

Tôi cho rằng bạn đã có hiểu biết cơ bản về các khái niệm Javascript và HTML DOM. Nếu không, bạn có thể xem qua các khái niệm này tại đây: Hướng dẫn Javascript , Giới thiệu về DOM .

Bây giờ chúng ta hãy nhảy vào chủ đề của chúng tôi!!

Làm thế nào một trang web được tạo ra?

Bạn đã bao giờ tò mò về cách thức hoạt động của web chưa? Điều gì đang xảy ra sau khi bạn nhập URL trang web và nhấp Enter? Làm thế nào bạn có thể nhìn thấy trang web đó trên màn hình của chúng tôi? Hãy xem xét nó từng bước một.

1. Sau khi bạn tìm kiếm bất kỳ trang web nào, một yêu cầu HTTP sẽ được gửi đến máy chủ.

2. Máy chủ sẽ gửi tệp trang web.

3. Trình duyệt sẽ phân tích các tệp này. Lúc đầu, một tệp HTML được phân tích cú pháp, sau đó các tệp CSS và JavaScript được phân tích cú pháp.

4. Trình duyệt xây dựng DOM từ HTML đã phân tích cú pháp và hiển thị nó trên màn hình.

Đây là cách một trang web được hiển thị trên màn hình của bạn (có các khái niệm khác như máy chủ DNS và giao thức HTTP, nhưng đó không phải là lĩnh vực chúng tôi quan tâm). Nó đơn giản như vậy, nhưng chờ đã, DOM này là gì? Nó từ đâu đến? Chúng ta sẽ khám phá DOM một chút chứ?

DOM đề cập đến Mô hình đối tượng tài liệu, đại diện cho một tài liệu HTML với một cây logic. Mỗi nhánh chứa các nút và mỗi nút chứa các đối tượng. Các phương thức DOM cho phép truy cập vào DOM. Với những phương pháp đó, bạn có thể thay đổi cấu trúc và nội dung của tài liệu.

Như chúng ta đã biết, HTML là khối xây dựng cơ bản của web và chúng ta có thể tạo các trang web bằng HTML. Hãy tạo một trang web đơn giản hiển thị “Xin chào thế giới!!” như hình dưới đây:

<html>
  <body>
    <div id="root">
      <h1 id="greet">Hello World!!</h1>
    </div>
  </body>
</html>

Để cho phép javascript tương tác với DOM, chúng ta cần thêm thẻ script vào tệp HTML và bạn có thể viết mã để tạo, xóa hoặc cập nhật các phần tử trong DOM (đây là cái mà chúng tôi gọi là thao tác DOM).

Hãy xem xét mã JavaScript tương tác với “Xin chào thế giới!!” được tạo ở trên. và thay đổi nội dung thành “Wassup World!!”.

Tạo các phần tử HTML bằng Javascript:

Như chúng ta đã thấy rằng chúng ta có thể sửa đổi các thành phần HTML thông qua javascript, hãy thử tạo một trang web có chứa div với “root” là id và h1 là con của div. h1 chứa “Xin chào thế giới!!”. Bạn có thể tìm thấy mã trong hộp cát bên dưới.

Nhưng việc tạo các phần tử thông qua Javascript là bắt buộc. Để hoàn thành nhiệm vụ này, chúng tôi phải cung cấp Javascript với hướng dẫn từng bước. Ví dụ: nếu bạn muốn tạo một div có id, trước tiên bạn phải tạo phần tử div đó, sau đó đặt thuộc tính id và cuối cùng nối div này với cha của nó. Đã có quá nhiều việc rồi. Điều gì sẽ xảy ra nếu có một cách để chỉ cho JavaScript biết phần tử nào cần tạo thay vì cách tạo phần tử đó (phương pháp khai báo)? Nó làm giảm rất nhiều mã JavaScript. Âm thanh tuyệt vời, phải không? Nhưng làm thế nào để chúng ta đạt được nó? Cách tiếp cận bắt buộc và tuyên bố này là gì?

Lập trình mệnh lệnh là cách bạn làm điều gì đó và lập trình khai báo giống như những gì bạn làm. Đây là một bài viết hay về lập trình mệnh lệnh và khai báo .

React là một ngôn ngữ khai báo, nghĩa là nó cho phép chúng ta viết mã mà không cần lo lắng về cách mọi thứ đang diễn ra bên trong.

Vì vậy, hãy xem cách lập trình khai báo có thể làm cho cuộc sống của chúng ta dễ dàng hơn.

Tổng quan về API React:

API React bao gồm các phương thức để thao tác DOM. ví dụ: React.createElement() và ReactDOM.render(). Hãy coi phương thức React.createElement() tương đương với document.createElement() và ReactDOM.render() như document.append(). Hãy nhìn sâu vào các phương pháp này.

React.createElement() nhận 2 đối số: phần tử được tạo và props. Nếu bạn muốn tạo một thẻ div đơn giản với id là “root” và dòng chữ “Xin chào thế giới!” bên trong nó, nó sẽ trông như thế này:

const elementType = "div";
const elementProps = {id: "root", children: "Hello World!!"}
const newDiv = React.createElement(elementType, elementProps)

const elementType = "h1";
const elementProps = {className: "heading", children: "Hello World!!"}
const heading = React.createElement(elementType,elementProps)

ReactDOM.render(heading,document.getElementById("root"))

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(heading)

React là điểm khởi đầu để sử dụng React trong mã của bạn. Bạn có thể cài đặt nó dưới dạng gói thông qua npm hoặc sử dụng tệp tập lệnh có sẵn trên unpkg.com . Hãy sử dụng các tệp script trong mã mẫu của chúng ta, vì chúng ta không cần bận tâm về việc cài đặt chúng.

Bây giờ, hãy tạo lại “Xin chào thế giới!!” trang có API React.

Chỗ dựa con cho React.createElement() có thể là văn bản thuần túy hoặc nó có thể là một phần tử khác, đó là cách chúng ta tạo các phần tử lồng nhau. Để minh họa, hãy xem mã HTML sau: một div dưới dạng vùng chứa chứa một div khác là con. Thẻ div con chứa hai thẻ span có nội dung “Xin chào” và “Thế giới”. Liên kết đến mãSandbox

tạo các phần tử lồng nhau với API React

Để tạo các phần tử lồng nhau, chúng ta phải sử dụng các phương thức lồng nhau, điều này làm cho mã rất khó đọc và hiểu.
Vì vậy, chúng tôi cần mã dễ đọc hơn. Vậy có cách nào khác để làm cho mã có thể đọc được không? Điều gì sẽ xảy ra nếu chúng ta có thể viết cú pháp giống như HTML thay vì sử dụng API React? JSX đi vào hình ảnh ở đây. Hãy dành vài phút để tìm hiểu về JSX.

JSX:

JSX là cú pháp giống như HTML (nhưng không phải HTML), là đường cú pháp trên API React thô của bạn. Bạn có thể viết tất cả các phương thức React này theo cú pháp giống như HTML đơn giản với sự trợ giúp của JSX.

Vì JSX không phải là Javascript, nên bạn cần dịch nó sang JavaScript để trình duyệt hiểu được.

Babel là trình biên dịch chuyển mã JSX thành Javascript. Tất cả JSX được Babel chuyển đổi thành React API, như hình bên dưới.

Babel dịch mã JSX thành Javascript

Như đã thấy trong hình trước, <div id=”root”> được chuyển đổi thành React.createElement(“div”,{id:”root”},children). Đây là cách Babel chuyển đổi JSX thành API React.

Để sử dụng Babel trong dự án của chúng tôi, chúng tôi phải sử dụng tệp tập lệnh từ unpkg.com và chúng tôi có thể bắt đầu viết JSX bên trong thẻ tập lệnh có đề cập đến type=”text/babel” . Để rõ hơn, bạn có thể tham khảo hộp cát bên dưới

Chúng ta đã tiến rất xa từ việc bắt buộc sửa đổi DOM thông qua Javascript sang sử dụng JSX. Không giống như trong Javascript, chúng tôi không bận tâm về cách tạo các phần tử khi sử dụng JSX. Công việc của Babel là chuyển đổi chúng thành React API, thứ sẽ sửa đổi DOM.

Đây là cách mà cách tiếp cận khai báo của React làm cho cuộc sống của chúng ta trở nên dễ dàng. Nhưng nó vẫn chưa kết thúc và chúng ta đang bỏ lỡ ý tưởng chính của React, tức là khả năng tái sử dụng. Hãy tạo một thành phần React có thể tái sử dụng.

Tạo các thành phần phản ứng:

Như chúng ta biết rằng các hàm giúp cuộc sống của chúng ta dễ dàng hơn bằng cách chia sẻ mã, chúng ta cũng có thể chia sẻ mã JSX dưới dạng các hàm, nhưng chúng được gọi là các thành phần trong React.

Hãy lấy một ví dụ.

<div className="container">
  <div className="msg">Hello World!!</div>
  <div className="msg">Bye World!!</div>
</div>

function message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      {message("Hello World!!")}
      {message("GoodBye World!!")}
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

const element = React.createElement("div",{className="container"},
  React.createElement(message,"Hello World!!"),
  React.createElement(message,"GoodBye World!!")
)

Chúng tôi đã chuyển chức năng thông báo dưới dạng tham số cho React.createElement() thay vì một phần tử. khi chúng ta truyền một hàm dưới dạng tham số cho React.createElement(), React Reconciler sẽ gọi hàm đó với tham số mà chúng ta đã truyền. Khi trình điều hòa gặp một phần tử máy chủ, nó sẽ cho phép trình kết xuất xử lý việc gắn nó.

Các thành phần máy chủ là các thành phần dành riêng cho nền tảng thuộc về môi trường máy chủ (như trình duyệt hoặc thiết bị di động). Trong trường hợp máy chủ DOM, đây có thể là các thành phần HTML chẳng hạn như div hoặc img .

Trong trường hợp của chúng ta, hai lệnh gọi hàm sẽ xảy ra, message (“Xin chào thế giới!!”) và tin nhắn (“Tạm biệt thế giới!!”) , và cả hai hàm sẽ trả về:

Giống như việc sử dụng JSX để làm cho mã dễ đọc hơn so với sử dụng API React thô, việc sử dụng JSX cho các thành phần tùy chỉnh (các hàm Javascript) giúp mã của chúng ta sạch hơn và dễ đọc hơn. Hãy nhớ rằng Babel chịu trách nhiệm lấy JSX của chúng ta và dịch mã nó sang React API, vì vậy chúng ta cần định cấu hình Babel theo cách sao cho nó chuyển hàm theo tên của nó thay vì một chuỗi.

Để sử dụng một thành phần tùy chỉnh làm thẻ JSX, chúng ta phải viết hoa ký tự đầu tiên của tên hàm để Babel nhận ra đó là một thành phần tùy chỉnh. Nó trông như thế này:

function Message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      <Message>Hello World!!</Message>
      <Message>GoodBye World!!</Message>
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

Tiếng hoan hô!! chúng tôi đã tạo thành phần React đầu tiên của mình

Sự kết luận:

Đây là cách React hoạt động đằng sau hậu trường. Hãy nhớ rằng đây chỉ là một bài viết cơ bản giải thích cách mọi thứ hoạt động bí mật và còn rất nhiều khái niệm khác như Trạng thái, DOM ảo, điều hòa, v.v. giúp React trở nên mạnh mẽ và hiệu quả.