Cách sử dụng useMemo React hook

Tìm hiểu công dụng của hookMemo React hữu ích để làm gì và cách làm việc với nó!

Kiểm tra của tôiGiới thiệu về React hooksđầu tiên, nếu bạn chưa quen với chúng.

Một móc React mà tôi đôi khi sử dụng làuseMemo.

import React, { useMemo } from 'react'

Móc này được sử dụng để tạo một giá trị được ghi nhớ.

Cái móc này rất giống vớiuseCallback, sự khác biệt làuseCallbacktrả về một cuộc gọi lại đã ghi nhớ vàuseMemotrả về một giá trị được ghi nhớ, là kết quả của lệnh gọi hàm đó. Trường hợp sử dụng cũng khác.useCallbackđược sử dụng cho các lệnh gọi lại được chuyển đến các thành phần con.

Đôi khi bạn phải tính toán một giá trị, thông qua một phép tính phức tạp hoặc bằng cách truy cập vào cơ sở dữ liệu để thực hiện một truy vấn tốn kém hoặc cho mạng.

Sử dụng hook này, thao tác này chỉ được thực hiện một lần, sau đó giá trị sẽ được lưu trữ trong giá trị đã ghi nhớ và lần tiếp theo bạn muốn tham chiếu nó, bạn sẽ nhận được nó nhanh hơn nhiều.

Đây là cách sử dụng nó:

const memoizedValue = useMemo(() => expensiveOperation())

Đảm bảo rằng bạn thêm mảng trống đó làm tham số thứ hai chouseMemo(), nếu không sẽ không có ghi nhớ nào xảy ra.

Nếu bạn cần truyền các đối số, bạn cũng cần truyền chúng vào mảng:

const memoizedValue = useMemo(() => expensiveOperation(param1, param2), [param1, param2])

Nếu một trong các tham số thay đổi khi bạn cố gắng truy cập giá trị, giá trị tất nhiên sẽ được tính toán mà không cần ghi nhớ.

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác:


Công nghệ Wiki trực tuyến!