Hướng dẫn nhanh để tìm hiểu React và cách Virtual DOM của nó hoạt động

Ảnh của @simonmigaj từ Bapt
Đây là một phần của loạt React cho người mới bắt đầu của tôi về việc giới thiệu React, các tính năng cốt lõi và cách thực hành tốt nhất để làm theo. Nhiều bài viết đang đến!
Bài viết tiếp theo>

Bạn có muốn học React mà không cần thu thập tài liệu (được viết tốt bằng cách này) không? Bạn bấm vào đúng bài viết.

Chúng tôi sẽ tìm hiểu cách chạy React với một tệp HTML duy nhất và sau đó tiếp xúc với đoạn trích đầu tiên.

Cuối cùng, bạn sẽ có thể giải thích các khái niệm này: đạo cụ, thành phần chức năng, JSX và Virtual DOM.

Mục tiêu là tạo ra một chiếc đồng hồ hiển thị giờ và phút. React cung cấp cho kiến ​​trúc sư mã của chúng tôi với các thành phần. Hãy để cùng nhau tạo ra thành phần đồng hồ của chúng tôi.

Bỏ qua phần mềm soạn sẵn HTML và nhập tập lệnh cho các phụ thuộc (với unpkg, xem ví dụ React). Một số dòng còn lại thực sự là mã React.

Đầu tiên, xác định thành phần Watch và mẫu của nó. Sau đó gắn React vào DOM và yêu cầu kết xuất đồng hồ.

Tiêm dữ liệu vào thành phần

Đồng hồ của chúng tôi khá ngu ngốc, nó hiển thị giờ và phút chúng tôi cung cấp cho nó.

Bạn có thể thử chơi xung quanh và thay đổi giá trị cho các thuộc tính đó (được gọi là đạo cụ trong React). Nó sẽ luôn hiển thị những gì bạn yêu cầu ngay cả khi nó không phải là số.

Loại thành phần React này chỉ có chức năng kết xuất là thành phần chức năng. Họ có một cú pháp ngắn gọn hơn so với các lớp.

Đạo cụ chỉ là dữ liệu được truyền đến một thành phần, thường là bởi một thành phần xung quanh. Thành phần sử dụng đạo cụ cho logic kinh doanh và kết xuất.

Nhưng ngay khi đạo cụ không thuộc về thành phần thì chúng là bất biến. Do đó, thành phần cung cấp đạo cụ là đoạn mã duy nhất có thể cập nhật giá trị đạo cụ.

Sử dụng đạo cụ là khá đơn giản. Tạo một nút DOM với tên thành phần của bạn làm tên thẻ. Sau đó cung cấp cho nó các thuộc tính được đặt tên theo đạo cụ. Sau đó, các đạo cụ sẽ có sẵn thông qua this.props trong thành phần.

Còn HTML không trích dẫn thì sao?

Tôi chắc chắn rằng bạn sẽ nhận thấy HTML không trích dẫn được trả về bởi hàm kết xuất. Mã này đang sử dụng ngôn ngữ JSX, nó có một cú pháp tốc ký để xác định mẫu HTML trong các thành phần React.

Bây giờ bạn có thể muốn tránh JSX để xác định khuôn mẫu thành phần. Trên thực tế, JSX trông giống như cú pháp đường.

Hãy xem đoạn trích sau đây cho thấy cả cú pháp JSX và React để xây dựng ý kiến ​​của bạn.

Đi xa hơn với DOM ảo

Phần cuối này phức tạp hơn nhưng rất thú vị. Nó sẽ giúp bạn hiểu cách React hoạt động dưới mui xe.

Cập nhật các thành phần trên trang web (một nút trong cây DOM) liên quan đến việc sử dụng API DOM. Nó sẽ sơn lại trang nhưng nó có thể chậm (xem bài viết này để biết tại sao).

Nhiều khung công tác như React và Vue.js giải quyết vấn đề này. Họ đưa ra một giải pháp gọi là Virtual DOM.

Ý tưởng rất đơn giản. Đọc và cập nhật cây DOM rất tốn kém. Vì vậy, thực hiện càng ít thay đổi càng tốt và cập nhật càng ít nút càng tốt.

Giảm các cuộc gọi đến API DOM liên quan đến việc giữ biểu diễn cây DOM trong bộ nhớ. Vì chúng ta đang nói về các khung JavaScript, việc chọn JSON nghe có vẻ hợp pháp.

Cách tiếp cận này ngay lập tức phản ánh những thay đổi trong DOM ảo.

Ngoài ra, nó tập hợp một vài cập nhật để áp dụng sau này trên Real DOM cùng một lúc (để tránh các vấn đề về hiệu suất).

Bạn có nhớ React.createEuity không? Trên thực tế, hàm này (được gọi trực tiếp hoặc thông qua JSX) tạo ra một nút mới trong Virtual DOM.

Để áp dụng các bản cập nhật, tính năng lõi DOM ảo được sử dụng, thuật toán đối chiếu.

Công việc của nó là đưa ra giải pháp tối ưu hóa nhất để giải quyết sự khác biệt giữa trạng thái DOM ảo trước đây và hiện tại.

Và sau đó áp dụng DOM ảo mới cho DOM thực.

Đọc thêm

Bài viết này đi xa về giải thích React nội bộ và Virtual DOM. Tuy nhiên, điều quan trọng là phải biết một chút về cách hoạt động của một khung công tác khi sử dụng nó.

Nếu bạn muốn tìm hiểu cách thức hoạt động của DOM ảo, hãy làm theo các khuyến nghị đọc của tôi. Bạn có thể viết DOM ảo của riêng bạn và tìm hiểu về kết xuất DOM.

Cảm ơn bạn đã đọc. Xin lỗi nếu điều này quá kỹ thuật cho bước đầu tiên của bạn trong React. Nhưng tôi hy vọng bây giờ bạn đã biết các đạo cụ, thành phần chức năng, JSX và Virtual DOM là gì.

Nếu bạn thấy bài viết này hữu ích, vui lòng nhấp vào nút a một vài lần để khiến người khác tìm thấy bài viết và thể hiện sự hỗ trợ của bạn!

Don Tiết quên theo dõi tôi để nhận thông báo về các bài viết sắp tới của tôi

Đây là một phần của loạt React cho người mới bắt đầu của tôi về việc giới thiệu React, các tính năng cốt lõi và cách thực hành tốt nhất để làm theo.
Bài viết tiếp theo>

Kiểm tra các bài viết khác của tôi

➥ JavaScript

  • Cách cải thiện kỹ năng JavaScript của bạn bằng cách viết Khung phát triển web của riêng bạn
  • Những lỗi thường gặp cần tránh khi làm việc với Vue.js

Mẹo & thủ thuật

  • Ngừng gỡ lỗi JavaScript đau đớn và Ôm Intellij với Bản đồ nguồn
  • Làm cách nào để giảm các gói JavaScript khổng lồ mà không cần nỗ lực

Được xuất bản lần đầu tại www.linkedin.com vào ngày 6 tháng 2 năm 2018.