Móc là một bổ sung mới trong React 16. 8. Chúng cho phép bạn sử dụng trạng thái và các tính năng khác của React mà không cần viết lớp
Móc là. Trang này cung cấp tổng quan về Hook cho người dùng React có kinh nghiệm. Đây là một cái nhìn tổng quan có nhịp độ nhanh. Nếu bạn bối rối, hãy tìm một hộp màu vàng như thế này
Giải thích chi tiết
Đọc để tìm hiểu lý do tại sao chúng tôi giới thiệu Hooks to React
↑↑↑ Mỗi phần kết thúc bằng một ô màu vàng như thế này. Họ liên kết đến giải thích chi tiết
📌 Móc trạng thái
Ví dụ này hiển thị một bộ đếm. Khi bạn nhấp vào nút, nó sẽ tăng giá trị
import React, { useState } from 'react';
function Example[] {
// Declare a new state variable, which we'll call "count" const [count, setCount] = useState[0];
return [
You clicked {count} times
setCount[count + 1]}>
Click me
];
}Ở đây,
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Đối số duy nhất của
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Khai báo nhiều biến trạng thái
Bạn có thể sử dụng State Hook nhiều lần trong một thành phần
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Cú pháp cho phép chúng ta đặt các tên khác nhau cho các biến trạng thái mà chúng ta đã khai báo bằng cách gọi
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Nhưng Hook là gì?
Móc là các chức năng cho phép bạn “kết nối” với các tính năng trạng thái và vòng đời của React từ các thành phần chức năng. Móc không hoạt động bên trong lớp — chúng cho phép bạn sử dụng React mà không cần lớp. [Chúng tôi viết lại các thành phần hiện có của bạn qua đêm nhưng bạn có thể bắt đầu sử dụng Móc trong các thành phần mới nếu muốn. ]
React cung cấp một số Hook tích hợp như
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Giải thích chi tiết
Bạn có thể tìm hiểu thêm về State Hook trên một trang chuyên dụng. Sử dụng State Hook
⚡️ Móc hiệu ứng
Bạn có thể đã thực hiện tìm nạp dữ liệu, đăng ký hoặc thay đổi thủ công DOM từ các thành phần React trước đây. Chúng tôi gọi các thao tác này là “tác dụng phụ” [hay gọi tắt là “hiệu ứng”] vì chúng có thể ảnh hưởng đến các thành phần khác và không thể thực hiện được trong quá trình kết xuất
Móc hiệu ứng,
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Ví dụ: thành phần này đặt tiêu đề tài liệu sau khi React cập nhật DOM
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Khi bạn gọi
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Các hiệu ứng cũng có thể tùy chọn chỉ định cách “dọn dẹp” sau chúng bằng cách trả về một chức năng. Ví dụ: thành phần này sử dụng hiệu ứng để đăng ký trạng thái trực tuyến của một người bạn và dọn sạch bằng cách hủy đăng ký trạng thái đó
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Trong ví dụ này, React sẽ hủy đăng ký khỏi
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Giống như với
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Móc cho phép bạn tổ chức các tác dụng phụ trong một thành phần theo những phần có liên quan [chẳng hạn như thêm và xóa đăng ký], thay vì buộc phân chia dựa trên các phương pháp vòng đời
Giải thích chi tiết
Bạn có thể tìm hiểu thêm về
42 trên một trang chuyên dụng. Sử dụng móc hiệu ứngfunction ExampleWithManyStates[] { // Declare multiple state variables! const [age, setAge] = useState[42]; const [fruit, setFruit] = useState['banana']; const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]]; // ... }
✌️ Quy tắc móc
Móc là các hàm JavaScript, nhưng chúng áp đặt hai quy tắc bổ sung
- Chỉ gọi Hook ở cấp cao nhất. Không gọi Hook bên trong các vòng lặp, điều kiện hoặc hàm lồng nhau
- Chỉ gọi Hook từ các thành phần chức năng React. Không gọi Hook từ các hàm JavaScript thông thường. [Chỉ có một nơi hợp lệ khác để gọi Móc - Móc tùy chỉnh của riêng bạn. Chúng ta sẽ tìm hiểu về chúng trong giây lát. ]
Chúng tôi cung cấp một plugin linter để tự động thực thi các quy tắc này. Chúng tôi hiểu rằng những quy tắc này thoạt đầu có vẻ hạn chế hoặc khó hiểu, nhưng chúng rất cần thiết để làm cho Móc hoạt động tốt
Giải thích chi tiết
Bạn có thể tìm hiểu thêm về các quy tắc này trên một trang chuyên dụng. Quy tắc móc
💡 Xây dựng móc của riêng bạn
Đôi khi, chúng tôi muốn sử dụng lại một số logic trạng thái giữa các thành phần. Theo truyền thống, có hai giải pháp phổ biến cho vấn đề này. các thành phần bậc cao hơn và đạo cụ kết xuất. Móc tùy chỉnh cho phép bạn làm điều này nhưng không cần thêm các thành phần khác vào cây của bạn
Trước đó trên trang này, chúng tôi đã giới thiệu thành phần
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Đầu tiên, chúng ta sẽ trích xuất logic này thành một Hook tùy chỉnh có tên là
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Nó lấy
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Bây giờ chúng ta có thể sử dụng nó từ cả hai thành phần
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Trạng thái của mỗi thành phần là hoàn toàn độc lập. Móc là một cách để sử dụng lại logic trạng thái, không phải chính trạng thái. Trên thực tế, mỗi lệnh gọi Hook có trạng thái hoàn toàn biệt lập — vì vậy bạn thậm chí có thể sử dụng cùng một Hook tùy chỉnh hai lần trong một thành phần
Móc tùy chỉnh là một quy ước hơn là một tính năng. Nếu tên của một chức năng bắt đầu bằng ”______218” và nó gọi các Hook khác, thì chúng tôi nói đó là một Hook tùy chỉnh. Quy ước đặt tên
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Bạn có thể viết các Móc tùy chỉnh bao gồm nhiều trường hợp sử dụng như xử lý biểu mẫu, hoạt ảnh, đăng ký khai báo, bộ hẹn giờ và có thể nhiều trường hợp khác mà chúng tôi chưa xem xét. Chúng tôi rất vui khi thấy cộng đồng React sẽ đưa ra những Móc tùy chỉnh nào
Giải thích chi tiết
Bạn có thể tìm hiểu thêm về Móc tùy chỉnh trên một trang chuyên dụng. Xây dựng móc của riêng bạn
🔌 Móc khác
Có một số Móc tích hợp ít được sử dụng hơn mà bạn có thể thấy hữu ích. Ví dụ: cho phép bạn đăng ký ngữ cảnh React mà không cần giới thiệu cách lồng
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Và cho phép bạn quản lý trạng thái cục bộ của các thành phần phức tạp bằng bộ giảm tốc
function ExampleWithManyStates[] {
// Declare multiple state variables!
const [age, setAge] = useState[42];
const [fruit, setFruit] = useState['banana'];
const [todos, setTodos] = useState[[{ text: 'Learn Hooks' }]];
// ...
}Giải thích chi tiết
Bạn có thể tìm hiểu thêm về tất cả các Móc tích hợp trên một trang chuyên dụng. Tham chiếu API móc
Bước tiếp theo
Phew, thật nhanh. Nếu một số điều không hoàn toàn hợp lý hoặc bạn muốn tìm hiểu chi tiết hơn, bạn có thể đọc các trang tiếp theo, bắt đầu với tài liệu State Hook
Bạn cũng có thể xem tài liệu tham khảo API Hooks và Câu hỏi thường gặp về Hooks
Cuối cùng, đừng bỏ lỡ trang giới thiệu giải thích lý do tại sao chúng tôi thêm Móc và cách chúng tôi sẽ bắt đầu sử dụng chúng song song với các lớp — mà không cần viết lại ứng dụng của chúng tôi