You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/state-as-a-snapshot.md
-10Lines changed: 0 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -74,20 +74,10 @@ Chúng ta sẽ xem xét kỹ hơn mối quan hệ giữa state và re-render tro
74
74
75
75
Không giống như một bức ảnh hay một khung hình phim, snapshot UI bạn trả về có tính tương tác. Nó bao gồm logic như event handler chỉ định điều gì xảy ra khi input thay đổi. React cập nhật màn hình để phù hợp với snapshot này và kết nối các event handler. Kết quả là, khi nhấn nút sẽ kích hoạt event handler từ JSX của bạn.
76
76
77
-
<<<<<<< HEAD
78
77
Khi React re-render một component:
79
78
1. React gọi lại hàm của bạn.
80
79
2. Hàm của bạn trả về một snapshot JSX mới.
81
80
3. React cập nhật màn hình sao cho tương đồng với snapshot bạn đã trả về.
82
-
=======
83
-
Unlike a photograph or a movie frame, the UI "snapshot" you return is interactive. It includes logic like event handlers that specify what happens in response to inputs. React updates the screen to match this snapshot and connects the event handlers. As a result, pressing a button will trigger the click handler from your JSX.
84
-
85
-
When React re-renders a component:
86
-
87
-
1. React calls your function again.
88
-
2. Your function returns a new JSX snapshot.
89
-
3. React then updates the screen to match the snapshot your function returned.
90
-
>>>>>>> 7bdbab144e09d4edf793ff5128080eb1dba79be4
91
81
92
82
<IllustrationBlocksequential>
93
83
<Illustration caption="React thực thi hàm của bạn" src="/images/docs/illustrations/i_render1.png" />
Copy file name to clipboardExpand all lines: src/content/learn/your-first-component.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -211,11 +211,7 @@ Khi mà một component con cần dữ liệu từ cha, [hãy truyền nó qua p
211
211
212
212
#### Sử dụng Component từ đầu đến cuối {/*components-all-the-way-down*/}
213
213
214
-
<<<<<<< HEAD
215
-
Ứng dụng React của bạn bắt đầu từ một component "gốc" (root). Thường thì component này được tạo ra tự động khi mà bạn bắt đầu một dự án mới. Ví dụ, nếu bạn dùng [CodeSandbox](https://codesandbox.io/) hay [Create React App](https://create-react-app.dev/), component gốc sẽ được định nghĩa ở `src/App.js`. Nếu bạn sử dụng framework [Next.js](https://nextjs.org/), component gốc sẽ được định nghĩa ở `pages/index.js`. Trong những ví dụ này, bạn đã export các component gốc.
216
-
=======
217
-
Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or if you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
218
-
>>>>>>> 7bdbab144e09d4edf793ff5128080eb1dba79be4
214
+
Ứng dụng React của bạn bắt đầu từ một component "gốc" (root). Thường thì component này được tạo ra tự động khi mà bạn bắt đầu một dự án mới. Ví dụ, nếu bạn dùng [CodeSandbox](https://codesandbox.io/) hay nếu bạn sử dụng framework [Next.js](https://nextjs.org/), component gốc sẽ được định nghĩa ở `pages/index.js`. Trong những ví dụ này, bạn đã export các component gốc.
219
215
220
216
Hầu hết các ứng dụng React đều sử dụng component từ đầu đến cuối. Điều này có nghĩa là bạn không chỉ sử dụng component cho những phần có thể tái sử dụng như các nút (button) mà còn cho các phần lớn hơn như sidebar, các danh sách và đích đến cuối, các trang hoàn chỉnh! Component là một cách tiện lợi để tổ chức code UI và markup, ngay cả khi một số chúng chỉ được sử dụng một lần.
*`load`: Một function trả về một [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) hoặc một *thenable* (một đối tượng giống Promise với một phương thức `then`). React sẽ không gọi hàm `load` cho tới khi bạn render component được trả về. Sau khi React gọi `load` lần đầu tiên, React sẽ đợi cho tới khi hàm này được giải quyết xong (resolve), sau đó sẽ render giá trị được giải quyết như một React component. Cả Promise được trả về và giá trị đã được giải quyết của Promise đó đều được lưu lại, nên React sẽ không gọi `load` thêm nữa. Nếu Promise từ chối, React sẽ `throw` lý do từ chối cho Error Boundary gần nhất để xử lý.
37
-
=======
38
-
*`load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or another *thenable* (a Promise-like object with a `then` method). React will not call `load` until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value's `.default` as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call `load` more than once. If the Promise rejects, React will `throw` the rejection reason for the nearest Error Boundary to handle.
39
-
>>>>>>> 7bdbab144e09d4edf793ff5128080eb1dba79be4
35
+
*`load`: Một function trả về một [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) hoặc một *thenable* (một đối tượng giống Promise với một phương thức `then`). React sẽ không gọi hàm `load` cho tới khi bạn render component được trả về. Sau khi React gọi `load` lần đầu tiên, React sẽ đợi cho tới khi hàm này được giải quyết xong (resolve), sau đó sẽ render giá trị `.default` như một React component. Cả Promise được trả về và giá trị đã được giải quyết của Promise đó đều được lưu lại, nên React sẽ không gọi `load` thêm nữa. Nếu Promise từ chối, React sẽ `throw` lý do từ chối cho Error Boundary gần nhất để xử lý.
Đoạn code này phụ thuộc vào [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) có thể sẽ cần được hỗ trợ bởi bundler hoặc framework của bạn.
79
-
=======
80
-
This code relies on [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) which might require support from your bundler or framework. Using this pattern requires that the lazy component you're importing was exported as the `default` export.
81
-
>>>>>>> 7bdbab144e09d4edf793ff5128080eb1dba79be4
73
+
Đoạn code này phụ thuộc vào [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) có thể sẽ cần được hỗ trợ bởi bundler hoặc framework của bạn. Sử dụng mẫu này yêu cầu lazy component mà bạn đang import phải được export bằng `default`.
82
74
83
75
Bây giờ code của component sẽ tải khi được yêu cầu, bạn sẽ cần phải xác định cái gì sẽ được hiển thị khi component đang được tải. Bạn có thể làm điều này bằng việc bọc lazy component hoặc bất kì phần tử cha của nó vào trong [`<Suspense>`](/reference/react/Suspense):
0 commit comments