Trong khi làm công việc phát triển giao diện người dùng, bạn có thể đã bắt gặp useMemo. Đối với những người chưa quen với nó, chúng tôi sẽ giải thích cách sử dụng useMemo trong React và cả những trường hợp sử dụng quan trọng/nổi bật nhất.  Sử dụngMemo là gì?  useMemo là một hook tích hợp tuyệt vời có thể giúp nâng cao hiệu suất của ứng dụng web của bạn. Chúng tôi biết rằng trong   , các thành phần được hiển thị bất cứ khi nào có thay đổi về trạng thái hoặc đạo cụ của thành phần. react  Các thành phần được kết xuất lại cũng sẽ tính toán lại các chức năng đang được sử dụng bên trong.  Do đó, nếu có các chức năng nặng, đắt tiền, hiệu suất có thể bị ảnh hưởng vì chúng phải được tính toán mọi lúc. useMemo giúp ghi nhớ các chức năng này để tối ưu hóa hiệu suất.   UseMemo hoạt động như thế nào trong React?  Để hiểu useMemo, chúng ta cần xem lại   . ghi nhớ là gì  Nếu có một chức năng nào đó tốn kém, chẳng hạn như tìm nạp nhiều dữ liệu, thì ghi nhớ là một cách để lưu trữ kết quả của chức năng đó để không phải gọi đi gọi lại.  useMemo sẽ nhận chức năng mà nó đang gói gọn và lưu vào bộ nhớ cache kết quả của chức năng đó để có thể cung cấp cho bạn khi cần thiết mà không cần thực hiện lại các tính toán.   Bạn sử dụng useMemo trong React như thế nào?  Là một hook tích hợp, bạn có thể nhập hook từ React và sử dụng nó ở cấp cao nhất.  Sau đó, bạn có thể kết thúc phép tính tốn kém của mình với useMemo bằng cách khai báo một số hằng số hoặc biến và gán nó cho kết quả hook của bạn.  Đừng quên thêm các thành phần phụ thuộc của bạn vì đây là cách useMemo xác định xem nó có phải tính toán lại hàm hay không.  Nếu sự phụ thuộc của bạn thay đổi, thì useMemo sẽ biết cách tính toán lại giá trị để nó luôn lưu vào bộ nhớ cache kết quả phù hợp.                   }                          ); } import  { useMemo } from   'react' ; function   someExpensiveFunction ( n ) {     return  n * n; function   myFunction ( {n} ) {     const  result = useMemo( () =>  someExpensiveFunction(n), [n]);     return  (         < div > {result} </ div > 
  Ví dụ: nếu bạn đã chuyển giá trị 5 thành  , nó sẽ lưu trữ giá trị 25. Nếu  đã thay đổi giá trị thành 7, useMemo biết rằng đó là một phần phụ thuộc và sẽ tính toán lại thành giá trị 49 và lưu vào bộ đệm kết quả đó.   n   n  Điều này đặc biệt hữu ích khi ứng dụng giao diện người dùng của bạn đang yêu cầu một API.  Những yêu cầu này có thể tốn kém, đặc biệt nếu bạn đang tìm nạp một lượng lớn dữ liệu.  Có lẽ ứng dụng của bạn có một số thành phần cần dữ liệu này, nhưng bạn không muốn thực hiện lệnh gọi API mỗi khi thành phần đó được hiển thị.  Sau đó, lưu trữ kết quả của bạn bằng useMemo có thể là lựa chọn tốt nhất của bạn.                             } }, []);              ) } import  React, { useMemo } from   'react' ; import  axios from   'axios' ; const  ApiComponent = () =>  {     const  memoizedResults = useMemo( async  () => {         try  {             const  apiResponse = await  axios.get( 'http://apicall.com/somedata' );             return  apiResponse.data;  } catch  (error) {             return  error;     return  (         < div > {apiResponse} </ div > 
  Như bạn có thể thấy, phần phụ thuộc của chúng tôi trống vì chúng tôi chỉ muốn nó hiển thị một lần, vì giá trị sẽ không thực sự thay đổi. Chúng tôi chỉ muốn thực hiện cuộc gọi API một lần khi nó hiển thị lần đầu tiên.  Sau đó, giá trị này sẽ được sử dụng lại trong các lần hiển thị tiếp theo.   Khi nào sử dụng useMemo là một ý tưởng tồi?  Cũng hữu ích như hook, việc sử dụng useMemo liên tục không nhất thiết là một ý tưởng hay. Bạn có thể muốn bọc mọi chức năng bạn viết bằng useMemo để 'lưu' các phép tính.  Tuy nhiên, sử dụng nó khi không cần thiết thực sự có thể làm chậm ứng dụng của bạn.   1. Tính toán tầm thường  Nếu chức năng bạn đang gói với useMemo là một tính toán đơn giản, thì chi phí sử dụng useMemo có thể là do hậu quả nhiều hơn.  Nếu bạn có thể xác định rằng trọng số của chức năng của bạn là khá nhỏ, chẳng hạn như thời gian O(n), thì việc xác định rằng hook là không cần thiết là phù hợp.   2. Khi chức năng của bạn có thể ảnh hưởng đến các trạng thái và biến bên ngoài  Nếu chức năng của bạn liên quan đến việc sửa đổi các biến toàn cục khác hoặc phụ thuộc vào chúng, thì sử dụng useMemo có thể không phải là một ý kiến hay.  Như đã mô tả trước đây, useMemo chỉ tính toán lại chức năng khi một phụ thuộc thay đổi.  Tuy nhiên, nếu hàm sử dụng các biến hoặc lệnh gọi không nhất thiết phải là thay đổi phụ thuộc, thì hàm sẽ không tính toán lại giá trị, khiến kết quả được lưu trong bộ nhớ đệm không chính xác.   Sự khác biệt giữa useMemo và useCallback là gì?  Một số bạn cũng có thể quen thuộc với useCallback, phục vụ mục đích tương tự như useMemo. Bài viết này sẽ không đi sâu vào useCallback, nhưng chúng ta sẽ phân biệt khi nào thì sử dụng hai chức năng này.  Có thể dễ nhầm lẫn giữa useMemo và useCallback, vì cả hai đều là móc hoạt động để tối ưu hóa ứng dụng của bạn bằng cách ghi nhớ điều gì đó cho bạn. Tuy nhiên, điều quan trọng cần lưu ý là điều mà họ đang ghi nhớ là khác nhau.  Trong hầu hết các trường hợp, useMemo ghi nhớ các giá trị trong khi useCallback ghi nhớ các hàm. Như đã thấy trong tên, useCallback được sử dụng để ghi nhớ các chức năng gọi lại, đặc biệt là những chức năng được truyền lại cho các thành phần con dưới dạng đạo cụ. Các hàm gọi lại có thể phụ thuộc vào các giá trị hoặc tham chiếu nhất định có thể thay đổi theo thời gian, điều đó có nghĩa là các bản cập nhật cho các hàm này sẽ gây ra kết xuất lại trong các thành phần sử dụng chúng. Do đó, ghi nhớ chúng có thể giúp ngăn kết xuất lại, điều này có thể khiến chúng tôi phải tối ưu hóa.  Tuy nhiên, vì useMemo có thể ghi nhớ cả hàm và giá trị, nên nó có thể được sử dụng thay cho hook useCallback. Tuy nhiên, điều quan trọng là phải xem xét bối cảnh của tình huống của bạn và sử dụng móc một cách thích hợp để sử dụng chúng như dự kiến.  Suy nghĩ cuối cùng  useMemo tổng thể…là một hook tuyệt vời, linh hoạt có thể ghi nhớ các giá trị cho bạn và tránh kết xuất lại. Bằng cách sử dụng hook một cách chiến lược, bạn có thể tối ưu hóa ứng dụng của mình, giảm số lần tính toán và cho phép người dùng có trải nghiệm nhanh hơn và mượt mà hơn.  Hãy để useMemo mang đến cho người dùng của bạn một… trải nghiệm đáng nhớ!

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

Khi nào và như thế nào để sử dụng useMemo trong React

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

147 Stories To Learn About Reading Books Online

178 Stories To Learn About Essay

287 Stories To Learn About Blockchain Development

72 Stories To Learn About Adam Smith

147 Stories To Learn About Reading Books Online

178 Stories To Learn About Essay

287 Stories To Learn About Blockchain Development

72 Stories To Learn About Adam Smith

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps