Mục đích chính của một thành phần React là trả lại một số JSX để được hiển thị. Thông thường, sẽ rất hữu ích nếu một thành phần thực thi một số mã thực hiện tác dụng phụ bên cạnh việc hiển thị JSX
Trong các thành phần của lớp, các tác dụng phụ được quản lý bằng các phương thức vòng đời. Trong các thành phần chức năng, chúng tôi quản lý các tác dụng phụ bằng Móc hiệu ứng. Một số tác dụng phụ phổ biến bao gồm. tìm nạp dữ liệu từ máy chủ, đăng ký luồng dữ liệu, ghi giá trị vào bảng điều khiển, bộ định thời khoảng thời gian và tương tác trực tiếp với DOM
Bảng cheat React HooksNgày 29 tháng 7 năm 2021 · 3 phút đã đọc
Bunlong
Nhóm mô hình phản ứngquản lý nhà nước
useState()
khai báo trạng thái
const [tên, đặtTên] = useState('Initial value');
Sao chépCập nhật trạng thái
setName('Giá trị mới'); 'New' + value); // based on previous state
Sao chépPhản ứng phụ
sử dụngEffect()
Chỉ kích hoạt chức năng gọi lại một lần khi thành phần được gắn kết
useEffect( () => {
// Tác dụng phụ, yêu cầu HTTP, setTimeout,. vân vân
}, []);
Sao chépKích hoạt chức năng gọi lại khi phụ thuộc 'VALUE' bị thay đổi
useEffect(() => {
// Tác dụng phụ, yêu cầu HTTP, setTimeout,. vân vân
}, [giá trị]);
Sao chépDọn dẹp tác dụng phụ khi thành phần không được đếm
useEffect(() => {
let timeout = setTimeout(doSomething, 5000);
return () => ClearTimeout(timeout);
}, [giá trị]);
Sao chépGhi nhớ cuộc gọi lại
sử dụngCallback()
Chỉ trả lại chức năng mới khi phụ thuộc thay đổi
const handleClick = useCallback(() => {
doSomethingWith(param1, param2);
}, [param1, param2]);
Sao chépGhi nhớ gọi lại cho một danh sách các phần tử động
const handleClick = useCallback((event) => {
const = sự kiện. mục tiêu;
const = nút. getAttribute('data-value');
doSomethingWith(giá trị);
}, []);
{đối tượng. bản đồ((obj) => (
{obj. giá trị}
))}
Sao chép
Ghi nhớ một giá trị
sử dụngMemo()
Sẽ chỉ kích hoạt khi phụ thuộc thay đổi
const = useMemo(() => {
// chỉ đánh giá khi param1 hoặc param2 thay đổi
return excessiveOperation(param1, param2);
}, [param1, param2]);
Sao chépPhần tử tham chiếu
userRef()
userRef giống như một "HỘP" có thể chứa giá trị có thể thay đổi trong thuộc tính hiện tại của nó
const inputRef = useRef(null); // initialize
...
const onButtonClick = () => {
// điểm hiện tại đến phần tử đầu vào
inputRef. hiện tại. tập trung(); /
}