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/managing-state.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -4,14 +4,14 @@ title: Quản Lý State
4
4
5
5
<Intro>
6
6
7
-
Khi ứng dụng của bạn ngày càng lớn, việc có ý thức hơn về cách tổ chức state và luồng data chảy giữa các component sẽ rất hữu ích. State dư thừa hoặc trùng lặp là nguyên nhân phổ biến gây ra một loạt bug khó hiểu. Trong chương này, bạn sẽ học cách cấu trúc state một cách tốt, cách giữ cho logic cập nhật state dễ bảo trì, và cách chia sẻ state giữa các component ở xa nhau.
7
+
Khi ứng dụng của bạn ngày càng lớn, việc có chủ ý hơn về cách tổ chức state và luồng data chảy giữa các component sẽ rất hữu ích. State dư thừa hoặc trùng lặp là nguyên nhân phổ biến gây ra một loạt bug khó hiểu. Trong chương này, bạn sẽ học cách cấu trúc state một cách chặt chẽ, cách giữ cho logic cập nhật state dễ bảo trì, và cách chia sẻ state giữa các component ở xa nhau.
8
8
9
9
</Intro>
10
10
11
11
<YouWillLearnisChapter={true}>
12
12
13
-
*[Cách suy nghĩ về thay đổi UI như những thay đổi state](/learn/reacting-to-input-with-state)
14
-
*[Cách cấu trúc state một cách tốt](/learn/choosing-the-state-structure)
13
+
*[Cách suy nghĩ về thay đổi UI khi state thay đổi](/learn/reacting-to-input-with-state)
14
+
*[Cách cấu trúc state một cách chặt chẽ](/learn/choosing-the-state-structure)
15
15
*[Cách "nâng state lên" để chia sẻ giữa các component](/learn/sharing-state-between-components)
16
16
*[Cách kiểm soát việc state được bảo tồn hay reset](/learn/preserving-and-resetting-state)
17
17
*[Cách hợp nhất logic state phức tạp trong một function](/learn/extracting-state-logic-into-a-reducer)
@@ -114,7 +114,7 @@ function submitForm(answer) {
114
114
115
115
## Chọn cấu trúc state {/*choosing-the-state-structure*/}
116
116
117
-
Cấu trúc state tốt có thể tạo ra sự khác biệt giữa một component dễ dàng sửa đổi và debug, và một component có hành vi khó đoán với một loạt bug khó hiểu. Nguyên tắc quan trọng nhất là state không nên chứa thông tin dư thừa hoặc trùng lặp. Nếu có state không cần thiết, rất dễ quên cập nhật nó và tạo ra bug!
117
+
Cấu trúc state tốt có thể tạo ra sự khác biệt giữa một component dễ dàng sửa đổi và debug, và một component có hành vi khó đoán với một loạt bug khó hiểu. Nguyên tắc quan trọng nhất là state không nên chứa thông tin dư thừa hoặc trùng lặp. Nếu có state không cần thiết, ta rất dễ quên cập nhật nó và tạo ra bug!
118
118
119
119
Ví dụ, form này có biến state `fullName` **dư thừa**:
## Truyền data sâu với context {/*passing-data-deeply-with-context*/}
701
701
702
-
Thông thường, bạn sẽ truyền thông tin từ component cha đến component con thông qua props. Nhưng việc truyền props có thể trở nên bất tiện nếu bạn cần truyền một prop qua nhiều component, hoặc nếu nhiều component cần cùng một thông tin. Context cho phép component cha cung cấp một số thông tin cho bất kỳ component nào trong cây con bên dưới nó—bất kể nó sâu đến đâu—mà không cần truyền một cách rõ ràng thông qua props.
702
+
Thông thường, bạn sẽ truyền thông tin từ component cha đến component con thông qua props. Nhưng việc truyền props có thể trở nên bất tiện nếu bạn cần truyền một prop qua nhiều component, hoặc nếu nhiều component cần cùng một thông tin. Context cho phép component cha cung cấp một số thông tin cho bất kỳ component nào ở bên dưới nó trong cấu trúc cây—bất kể nó sâu đến đâu—mà không cần truyền một cách rõ ràng thông qua props.
703
703
704
704
Ở đây, component `Heading` xác định cấp độ heading của nó bằng cách "hỏi" `Section` gần nhất về cấp độ của nó. Mỗi `Section` theo dõi cấp độ riêng của nó bằng cách hỏi `Section` cha và cộng thêm một. Mọi `Section` cung cấp thông tin cho tất cả các component bên dưới nó mà không cần truyền props—nó thực hiện điều đó thông qua context.
## Mở rộng với reducer và context {/*scaling-up-with-reducer-and-context*/}
803
803
804
-
Reducer cho phép bạn tổng hợp logic cập nhật state của component. Context cho phép bạn truyền thông tin xuống sâu cho các component khác. Bạn có thể kết hợp reducer và context cùng nhau để quản lý state của một màn hình phức tạp.
804
+
Reducer cho phép bạn tổng hợp logic cập nhật state của component. Context cho phép bạn truyền thông tin xuống sâu cho các component khác. Bạn có thể kết hợp reducer và context cùng nhau để quản lý state của một giao diện phức tạp.
805
805
806
-
Với cách tiếp cận này, một component cha có state phức tạp sẽ quản lý nó bằng reducer. Các component khác ở bất kỳ vị trí sâu nào trong cây có thể đọc state của nó thông qua context. Chúng cũng có thể dispatch các action để cập nhật state đó.
806
+
Với cách tiếp cận này, một component cha có state phức tạp sẽ quản lý nó bằng reducer. Các component khác ở bất kỳ vị trí nào sâu trong cây đều có thể đọc state của nó thông qua context. Chúng cũng có thể dispatch các action để cập nhật state đó.
0 commit comments