|
1 | 1 | ---
|
2 | 2 | id: rendering-elements
|
3 |
| -title: Rendering Elements |
| 3 | +title: Việc render các element |
4 | 4 | permalink: docs/rendering-elements.html
|
5 | 5 | redirect_from:
|
6 | 6 | - "docs/displaying-data.html"
|
7 | 7 | prev: introducing-jsx.html
|
8 | 8 | next: components-and-props.html
|
9 | 9 | ---
|
10 | 10 |
|
11 |
| -Elements are the smallest building blocks of React apps. |
| 11 | +Element là những mảnh ghép nhỏ nhất của các ứng dụng React. |
12 | 12 |
|
13 |
| -An element describes what you want to see on the screen: |
| 13 | +Một element mô tả những gì bạn muốn nhìn thấy trên màn hình: |
14 | 14 |
|
15 | 15 | ```js
|
16 | 16 | const element = <h1>Hello, world</h1>;
|
17 | 17 | ```
|
18 | 18 |
|
19 |
| -Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. |
| 19 | +Không giống như những element DOM của trình duyệt, React element là những "đối tượng đơn giản" (plain object) và rất dễ để tạo ra. React DOM giữ vai trò cập nhật DOM để phù hợp với các React element. |
20 | 20 |
|
21 |
| ->**Note:** |
| 21 | +>**Ghi chú:** |
22 | 22 | >
|
23 |
| ->One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead. |
| 23 | +>Người ta có thể nhầm lẫn các element với một khái niệm được biết rộng hơn về các "component". Chúng tôi sẽ giới thiệu các "component" trong [phần tới](/docs/components-and-props.html). Các element là những gì mà các component được "làm từ", và chúng tôi khuyến khích bạn đọc phần này trước khi đi đến phần kế tiếp. |
24 | 24 |
|
25 |
| -## Rendering an Element into the DOM {#rendering-an-element-into-the-dom} |
| 25 | +## Việc render một element vào trong DOM {#rendering-an-element-into-the-dom} |
26 | 26 |
|
27 |
| -Let's say there is a `<div>` somewhere in your HTML file: |
| 27 | +Hãy hình dung có một thẻ `<div>` ở đâu đó trong "tệp" (file) HTML: |
28 | 28 |
|
29 | 29 | ```html
|
30 | 30 | <div id="root"></div>
|
31 | 31 | ```
|
32 | 32 |
|
33 |
| -We call this a "root" DOM node because everything inside it will be managed by React DOM. |
| 33 | +Chúng tôi gọi cái này là một nốt (node) DOM gốc "root" bởi về mọi thứ bên trong nó sẽ được quản lý bởi React DOM. |
34 | 34 |
|
35 |
| -Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like. |
| 35 | +Các ứng dụng đã xây dựng với React thường có duy nhất một nốt (node) DOM "gốc" (root). Nếu bạn kết hợp React vào trong một ứng dụng đã tồn tại, bạn có thể có nhiều "nốt" (node) DOM gốc "bị cô lập" (isolated) như bạn muốn. |
36 | 36 |
|
37 |
| -To render a React element into a root DOM node, pass both to `ReactDOM.render()`: |
| 37 | +Để render một React element vào bên trong một "nốt" (node) DOM gốc, truyền tất cả vào `ReactDOM.render()`: |
38 | 38 |
|
39 | 39 | `embed:rendering-elements/render-an-element.js`
|
40 | 40 |
|
41 | 41 | [](codepen://rendering-elements/render-an-element)
|
42 | 42 |
|
43 |
| -It displays "Hello, world" on the page. |
| 43 | +Ví dụ trên hiển thị dòng chữ "Hello, world" trên trang web. |
44 | 44 |
|
45 |
| -## Updating the Rendered Element {#updating-the-rendered-element} |
| 45 | +## Việc cập nhật element đã được render {#updating-the-rendered-element} |
46 | 46 |
|
47 |
| -React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. |
| 47 | +Các React element là [bất biến](https://vi.wikipedia.org/wiki/%C4%90%E1%BB%91i_t%C6%B0%E1%BB%A3ng_b%E1%BA%A5t_bi%E1%BA%BFn). Một khi bạn tạo ra một element, bạn không thể thay đổi các "con" (children) hoặc các "thuộc tính" (attribute) của nó. Một element giống như một khung hình duy nhất trong một bộ phim: nó đại diện cho "giao diện" (UI) tại một thời điểm nhất định. |
48 | 48 |
|
49 |
| -With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`. |
| 49 | +Với sự hiểu biết của chúng tôi cho đến thời điểm này, thì chỉ có một cách duy nhất để cập nhật "giao diện" (UI) đó là tạo ra một element mới và truyền nó vào `ReactDOM.render()`. |
50 | 50 |
|
51 |
| -Consider this ticking clock example: |
| 51 | +Hãy xem xét ví dụ đồng hồ "đánh dấu" (tick) này: |
52 | 52 |
|
53 | 53 | `embed:rendering-elements/update-rendered-element.js`
|
54 | 54 |
|
55 | 55 | [](codepen://rendering-elements/update-rendered-element)
|
56 | 56 |
|
57 |
| -It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback. |
| 57 | +Nó gọi `ReactDOM.render()` mỗi giây từ một "lời gọi lại" (callback) [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval). |
58 | 58 |
|
59 |
| ->**Note:** |
| 59 | +>**Ghi chú:** |
60 | 60 | >
|
61 |
| ->In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html). |
| 61 | +>Trong thực tế, hầu hết các ứng dụng React chỉ gọi `ReactDOM.render()` một lần duy nhất. Trong những phần tiếp theo, chúng ta sẽ tìm hiểu làm thế nào để "mã" (code) được đóng gói vào ["những component có trạng thái" (stateful components)](/docs/state-and-lifecycle.html). |
62 | 62 | >
|
63 |
| ->We recommend that you don't skip topics because they build on each other. |
| 63 | +>Chúng tôi khuyên bạn đừng bỏ qua các "chủ đề" (topic) vì chúng có tính xây dựng lẫn nhau. |
64 | 64 |
|
65 |
| -## React Only Updates What's Necessary {#react-only-updates-whats-necessary} |
| 65 | +## React Chỉ Cập Nhật Những Gì Cần Thiết {#react-only-updates-whats-necessary} |
66 | 66 |
|
67 |
| -React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. |
| 67 | +React DOM so sánh element và các thành phần con của nó với cái trước đó, và chỉ áp dụng những cập nhật DOM cần thiết để đưa DOM đến trạng thái được mong muốn. |
68 | 68 |
|
69 |
| -You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools: |
| 69 | +Bạn có thể xác minh điều trên bằng cách kiểm tra [ví dụ cuối](codepen://rendering-elements/update-rendered-element) với các công cụ của trình duyệt: |
70 | 70 |
|
71 | 71 | 
|
| 72 | + |
72 | 73 |
|
73 |
| -Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM. |
| 74 | +Mặc dù chúng ta tạo ra một element miêu tả toàn bộ cây "giao diện" (UI) trên mỗi "đánh dấu" (tick), chỉ những "nốt văn bản" (text node) có nội dung thay đổi mới nhận sự cập nhật bởi React DOM. |
74 | 75 |
|
75 |
| -In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs. |
| 76 | +Với kinh nghiệm của chúng tôi thì chúng ta nên suy nghĩ về cách "giao diện" (UI) nên trông như thế nào tại mọi thời điểm hơn là suy nghĩ làm thế nào để thay đổi "giao diện" (UI) theo thời gian, điều này sẽ loại bỏ được rất nhiều "lỗi" (bug). |
0 commit comments