Rendering Elements - ReactJs

Phần tử là phần tử nhỏ nhất trong React apps.
Một phần tử miêu tả thứ bạn muốn nhìn thấy trên màn hình:

const element = <h1>Hello, world</h1>;

Không giống như phần tử DOM của trình duyệt, phần tử của React là các đối tượng minh bạch, và tạo ra đơn giản. React DOM xử lý phần cập nhật DOM để khớp với phần tử của React.

Note: Có thể dễ nhầm lẫn phần tử(elements) với một khái niệm đã được biết đến rộng rãi của “components”(thành phần). Chúng tôi sẽ giới thiệu components trong phần tiếp theo. Elements là những gì tạo thành components , và chúng tôi khuyến khích bạn đọc phần này trước khi bước tiếp.

Kiết xuất một Element trong DOM
Giả sử đây là một thẻ div đâu đó trong file HTML của bạn:

<div id="root"></div>

Chúng tôi gọi đây là node DOM gốc bởi vì mọi thứ trong nó sẽ được quản lý bởi React DOM.

Ứng dụng chỉ được dựng bởi React thường có một node DOM gốc. Nếu bạn tích hợp React vào một app có sẵn, bạn có thể bao nhiêu node DOM gốc độc lập tùy thích.

Để kiết xuất phần tử của React vào node DOM gốc, đưa cả hai vào

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Sẽ hiển thị “Hello, world” trên trang.
Cập nhật phần tử đã được kiết xuất

Các phần tử của React là không thể thay đổi (bất biến). Một khi bạn tạo ra một phần tử, bạn không thể thay đổi phần tử con hoặc thuộc tính của nó. Một phần tử giống như một frame (khung hình) trong một cuốn phim: nó biểu diễn giao diện trong một điểm thời gian (thời điểm).

Với kiến thức sâu rộng của chúng tôi (hiểu biết của chúng tôi đến nay), chỉ có một cách cập nhật giao diện đó chính là tạo một phần tử mới, và đưa nó vào trong hàm ReactDOM.render().

Xem xét đến ví dụ về đồng hồ đếm giờ:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));}

setInterval(tick, 1000);

Chương trình trên gọi ReactDOM.render() mỗi giây từ hàm callback setInterval().

Note: Trong thực tiễn, phần lớn React apps chỉ gọi hàm ReactDOM.render() một lần. Trong phần tiếp theo chúng ta sẽ học làm thế nào code có thể đóng gói trong các stateful components.

Bạn không nên bỏ qua các chủ đề bởi vì chúng được xây dựng dựa trên nhau.

React chỉ cập nhật những gì cần thiết

React DOM so sánh phần tử và con của nó với chính nó trước đó, và chỉ chấp nhận các bản cập nhật DOM cần thiết để mang DOM về trạng thái mong muốn.

Bạn có thể xác thực bằng cách kiểm tra ví dụ cuối cùng với công cụ của web.

Mặc dù chúng ta tạo một phần tử diễn tả tất cả cây giao diện trên từng giây, chỉ những node có nội dung đã thay đổi được cập nhật bởi ReactDOM.

Với kinh nghiệm của chúng tôi, suy nghĩ về giao diện nên hiển thị như thế nào trong từng khoảnh khắc, tốt hơn thay đổi nó thế nào qua thời gian, giúp loại bỏ cả một đống lỗi.