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
*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
9
+
*Hook* là một tính năng mới từ React 16.8. Nó cho phép sử dụng state và các tính năng khác của React mà không cần viết dạng class
10
10
11
-
Hooks are JavaScript functions, but you need to follow two rules when using them. We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)to enforce these rules automatically:
11
+
Hook là các function JavaScript, có những quy luật bạn cần phải tuân theo khi sử dụng. Chúng tôi có [một plugin linter](https://www.npmjs.com/package/eslint-plugin-react-hooks)để đảm bảo các luật này luôn luôn được áp dụng đúng:
12
12
13
-
### Only Call Hooks at the Top Level {#only-call-hooks-at-the-top-level}
13
+
### Chỉ gọi Hook ở trên cùng {#only-call-hooks-at-the-top-level}
14
14
15
-
**Don't call Hooks inside loops, conditions, or nested functions.**Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple`useState`and`useEffect` calls. (If you're curious, we'll explain this in depth [below](#explanation).)
15
+
**Không gọi hook bên trong loop, câu điều kiện, hay các function lồng với nhau.**Thay vì đó, luôn sử dụng Hook ở phần trên cùng của function. Với cách này, bạn đảm bảo các Hook được gọi theo đúng thứ tự trong các lần render. Nó cho phép React có được đúng state giữa nhiều lần gọi`useState`và`useEffect`. (Nếu bạn có thắc mắc, chúng tôi sẽ giải thích trong phần giải thích cụ thể hơn [bên dưới](#explanation).)
16
16
17
-
### Only Call Hooks from React Functions {#only-call-hooks-from-react-functions}
17
+
### Chỉ gọi Hook từ React Function {#only-call-hooks-from-react-functions}
18
18
19
-
**Don't call Hooks from regular JavaScript functions.**Instead, you can:
19
+
**Không gọi Hook từ mà function JavaScript.**Thay vì đó, bạn có thể:
20
20
21
-
* ✅ Call Hooks from React function components.
22
-
* ✅ Call Hooks from custom Hooks (we'll learn about them [on the next page](/docs/hooks-custom.html)).
21
+
* ✅ Gọi Hook từ React function components.
22
+
* ✅ Gọi Hook từ custom Hook (Chúng ta sẽ học [ở trang sau](/docs/hooks-custom.html)).
23
23
24
-
By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
24
+
Khi tuân theo quy luật này, chúng ta đảm bảo tất cả logic trong 1 component rõ ràng nhất.
25
25
26
26
## ESLint Plugin {#eslint-plugin}
27
27
28
-
We released an ESLint plugin called [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)that enforces these two rules. You can add this plugin to your project if you'd like to try it:
28
+
Chúng tôi có cung cấp plugin ESLint tên là [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)đảm bảo 2 luật này luôn được áp dụng. Nếu thích bạn có thể thêm vào project:
29
29
30
30
```bash
31
31
npm install eslint-plugin-react-hooks --save-dev
32
32
```
33
33
34
34
```js
35
-
//Your ESLint configuration
35
+
//cài đặt ESLint
36
36
{
37
37
"plugins": [
38
38
// ...
39
39
"react-hooks"
40
40
],
41
41
"rules": {
42
42
// ...
43
-
"react-hooks/rules-of-hooks":"error", //Checks rules of Hooks
"react-hooks/rules-of-hooks":"error", //Kiểm tra rule của Hook
44
+
"react-hooks/exhaustive-deps":"warn"//Kiểm tra effect dependency
45
45
}
46
46
}
47
47
```
48
48
49
-
In the future, we intend to include this plugin by default into Create React App and similar toolkits.
49
+
Trong tương lai, chúng tôi có định sẽ gộp luôn 2 plugin này vào trong Create React App và các bộ công cụ tương tự
50
50
51
-
**You can skip to the next page explaining how to write [your own Hooks](/docs/hooks-custom.html)now.**On this page, we'll continue by explaining the reasoning behind these rules.
51
+
**Bạn có thể bỏ qua và đọc tiếp trang chỉ dẫn [tạo custom Hook](/docs/hooks-custom.html)bây giờ.**Ở đây, chúng ta sẽ tiếp tục giải thích lý do đằng sau những quy luật này.
52
52
53
-
## Explanation {#explanation}
53
+
## Giải thích {#explanation}
54
54
55
-
As we [learned earlier](/docs/hooks-state.html#tip-using-multiple-state-variables), we can use multiple State or Effect Hooks in a single component:
55
+
Như chúng ta [đã học trước đây](/docs/hooks-state.html#tip-using-multiple-state-variables), chúng ta có thể sử dụng nhiều state hoặc nhiều effect trên một component
56
56
57
57
```js
58
58
functionForm() {
59
-
// 1. Use the name state variable
59
+
// 1. Sử dụng state tên name
60
60
const [name, setName] =useState('Mary');
61
61
62
-
// 2. Use an effect for persisting the form
62
+
// 2. Sử dụng một effect lưu giá trị trên form
63
63
useEffect(functionpersistForm() {
64
64
localStorage.setItem('formData', name);
65
65
});
66
66
67
-
// 3. Use the surname state variable
67
+
// 3. Sử dụng state tên surname
68
68
const [surname, setSurname] =useState('Poppins');
69
69
70
-
// 4. Use an effect for updating the title
70
+
// 4. Sử dụng 1 effect cập nhập title
71
71
useEffect(functionupdateTitle() {
72
72
document.title= name +''+ surname;
73
73
});
@@ -76,63 +76,62 @@ function Form() {
76
76
}
77
77
```
78
78
79
-
So how does React know which state corresponds to which `useState`call? The answer is that**React relies on the order in which Hooks are called**. Our example works because the order of the Hook calls is the same on every render:
79
+
Vậy làm sao React biết được state nào ứng với lúc gọi `useState`? Câu trả lời là**React dựa trên thứ tự Hook được gọi**. Trong ví dụ trên, vì thứ tự Hook được gọi đúng theo lúc khai báo trong khi render:
80
80
81
81
```js
82
82
// ------------
83
-
//First render
83
+
//Lần đầu render
84
84
// ------------
85
-
useState('Mary') // 1. Initialize the name state variable with 'Mary'
86
-
useEffect(persistForm) // 2. Add an effect for persisting the form
87
-
useState('Poppins') // 3. Initialize the surname state variable with 'Poppins'
88
-
useEffect(updateTitle) // 4. Add an effect for updating the title
85
+
useState('Mary') // 1. Khởi tạo biết name với giá trị 'Mary'
86
+
useEffect(persistForm) // 2. Thêm một effect
87
+
useState('Poppins') // 3. KHởi tạo biến surname với giá trị 'Poppins'
88
+
useEffect(updateTitle) // 4. Thêm một effect cập nhập title
89
89
90
90
// -------------
91
-
//Second render
91
+
//Lần gọi render thứ 2
92
92
// -------------
93
-
useState('Mary') // 1. Read the name state variable (argument is ignored)
94
-
useEffect(persistForm) // 2. Replace the effect for persisting the form
95
-
useState('Poppins') // 3. Read the surname state variable (argument is ignored)
96
-
useEffect(updateTitle) // 4. Replace the effect for updating the title
93
+
useState('Mary') // 1. Đọc giá trị biến name
94
+
useEffect(persistForm) // 2. Thay thế effect cũ
95
+
useState('Poppins') // 3. Đọc giá trị biến surname
96
+
useEffect(updateTitle) // 4. Thay thế effect cập nhập title
97
97
98
98
// ...
99
99
```
100
100
101
-
As long as the order of the Hook calls is the same between renders, React can associate some local state with each of them. But what happens if we put a Hook call (for example, the `persistForm` effect) inside a condition?
102
-
101
+
Miễn là thứ tự của Hook gọi đúng theo thứ tự giữa các lần render, React có thể liên kết local state với nhau. Chuyện gì sẽ xảy ra nếu chúng ta đặt câu gọi Hook (ví dụ như `persistForm` bên trong trong câu điều kiện?
103
102
```js
104
-
// 🔴 We're breaking the first rule by using a Hook in a condition
103
+
// 🔴 Chúng ta vi phạm nguyên tắc không đặt trong câu điều kiện
105
104
if (name !=='') {
106
105
useEffect(functionpersistForm() {
107
106
localStorage.setItem('formData', name);
108
107
});
109
108
}
110
109
```
111
110
112
-
The `name !== ''`condition is`true` on the first render, so we run this Hook. However, on the next render the user might clear the form, making the condition `false`. Now that we skip this Hook during rendering, the order of the Hook calls becomes different:
111
+
Trong lần đầu render, mệnh đề điều kiện `name !== ''`trả về`true`, Hook sẽ được gọi. Tuy nhiên, trong lần gọi tiếp theo, user có thể xóa giá trị trong form, việc này làm cho mệnh đề điều kiện trả về `false`, chúng ta bỏ qua câu gọi effect, thứ tự gọi Hook cũng thay đổi theo:
113
112
114
113
```js
115
-
useState('Mary') // 1. Read the name state variable (argument is ignored)
116
-
// useEffect(persistForm) // 🔴 This Hook was skipped!
117
-
useState('Poppins') // 🔴 2 (but was 3). Fail to read the surname state variable
118
-
useEffect(updateTitle) // 🔴 3 (but was 4). Fail to replace the effect
114
+
useState('Mary') // 1. Đọc giá trị name
115
+
// useEffect(persistForm) // 🔴 Hook bị bỏ qua!
116
+
useState('Poppins') // 🔴 2 (thật ra là 3). Không đọc được giá trị surname
117
+
useEffect(updateTitle) // 🔴 3 (thật ra là 4). Không thể thay thế effect
119
118
```
120
119
121
-
React wouldn't know what to return for the second `useState`Hook call. React expected that the second Hook call in this component corresponds to the `persistForm` effect, just like during the previous render, but it doesn't anymore. From that point, every next Hook call after the one we skipped would also shift by one, leading to bugs.
120
+
React không biết được trả về gì cho `useState`ở lần 2. React tưởng là Hook thứ 2 trong component tương ứng với effect `persistForm`, cũng giống như lần render trước, tuy nhiên không còn đúng nữa. Kể từ lúc đó, tất cả những lần gọi Hook sau đều bỏ qua một bước, dẫn đến bug.
122
121
123
-
**This is why Hooks must be called on the top level of our components.** If we want to run an effect conditionally, we can put that condition *inside* our Hook:
122
+
**Đó là lý do tại sao phải gọi Hook ở trên cùng của component**. Nếu chúng ta muốn chạy effect theo điều kiện, chúng ta có thể đặt điều kiện *bên trong* Hook:
124
123
125
124
```js
126
125
useEffect(functionpersistForm() {
127
-
// 👍 We're not breaking the first rule anymore
126
+
// 👍 Không phá vỡ nguyên tắc nữa
128
127
if (name !=='') {
129
128
localStorage.setItem('formData', name);
130
129
}
131
130
});
132
131
```
133
132
134
-
**Note that you don't need to worry about this problem if you use the [provided lint rule](https://www.npmjs.com/package/eslint-plugin-react-hooks).**But now you also know *why* Hooks work this way, and which issues the rule is preventing.
133
+
**Lưu ý, bạn không cần lo lắng về vấn đề này nếu dùng [ lint](https://www.npmjs.com/package/eslint-plugin-react-hooks).**Giờ bạn cũng hiểu được *tại sao* Hook làm việc như vậy, và tại sao chúng ta lại có những nguyên tắc này.
135
134
136
-
## Next Steps {#next-steps}
135
+
## Tiếp theo {#next-steps}
137
136
138
-
Finally, we're ready to learn about [writing your own Hooks](/docs/hooks-custom.html)! Custom Hooks let you combine Hooks provided by React into your own abstractions, and reuse common stateful logic between different components.
137
+
Cuối cùng thì chúng ta cũng đã sẵn sàng học [cách viết custom Hooks](/docs/hooks-custom.html)! Custom Hook cho phép chúng ta kết hợp các Hook được cung cấp bởi React với những gì bạn muốn, tái sử dụng những logic giữa các component.
0 commit comments