Bắt đầu

Nếu bạn muốn theo dõi trong IDE cục bộ của mình, bạn có thể tìm thấy Repo GitHub tại đây .

• clone
• cd client
• npm i
• npm start

Bình đẳng tham chiếu là một khái niệm nền tảng trong cả JavaScript và Khoa học máy tính nói chung. Vì vậy, hãy bắt đầu với một cuộc biểu tình của nó trong thực tế.

Tôi đã nhúng các ảnh chụp màn hình xuyên suốt bài viết để dễ sử dụng trên thiết bị di động. Nếu bạn đang sử dụng máy tính để bàn và đã sao chép nó xuống, hãy chạy referentialEquality.jsđể quan sát đầu ra hoặc chỉ chơi với đoạn mã JSFiddle được nhúng bên dưới.

Khi đánh giá xem the integer 1có hoàn toàn bằng với the hay không integer 1, giao diện điều khiển sẽ in ra true. Điều này là do, à… the integer 1 hoàn toàn bằng với integer 1.

Chúng tôi thấy kết quả tương tự khi đánh giá hai chuỗi.

Rõ ràng, đây sẽ luôn là trường hợp đối với hai kiểu dữ liệu nguyên thủy có cùng giá trị.

Bây giờ, còn cấu trúc dữ liệu thì sao? Ví dụ: hai đối tượng bằng chữ có cùng cặp khóa/giá trị? Còn đối tượng trống bằng chữ thì sao?

Tại sao điều này sẽ in false? Khi so sánh xem hai ký tự đối tượng này có hoàn toàn bằng nhau hay không, JavaScript sử dụng địa chỉ bộ nhớ tương ứng của chúng .

Nói cách khác, hai đối tượng này có thể chứa các giá trị giống nhau nhưng chúng không tham chiếu đến cùng một đối tượng . Chúng trông giống nhau nhưng chiếm hai không gian khác nhau trong bộ nhớ .

Điều tương tự cũng áp dụng cho dù bạn đang so sánh hai ký tự đối tượng, hai ký tự mảng hay hai hàm!

Để chứng minh điều này hơn nữa, chúng ta sẽ định nghĩa một hàm func, hàm này trả về một hàm ẩn danh, đến lượt nó, trả về một thứ khác ( như một phần tử JSX ).

Sau đó, chúng ta sẽ gán hai hàm khác nhau firstRendervà secondRender, bằng với giá trị được trả về bởi func.

Hãy coi đây funclà thành phần chức năng React của bạn, trong khi đó firstRenderlà một chức năng bên trong nó trong lần kết xuất đầu tiên và secondRenderlà một chức năng bên trong nó trong lần kết xuất thứ hai.

Mặc dù firstRendervà secondRendertrả về cùng một giá trị và được gán từ cùng một định nghĩa, nhưng chúng không có đẳng thức tham chiếu . Do đó, mỗi khi thành phần hiển thị, nó sẽ xác định lại chức năng này.

Thật không may, trong JavaScript, không dễ để in các địa chỉ bộ nhớ này như trong Python, nhưng để giải thích sâu hơn một chút về tham chiếu so với giá trị, hãy xem bài viết này từ freeCodeCamp.

Chủ đề này có thể trở nên dày đặc và bạn không cần phải dạy một lớp về chủ đề này tối nay. Vì vậy, bây giờ, chỉ cần nhớ:

• kiểu dữ liệu nguyên thủy kiểu ===dữ liệu nguyên thủy
• cấu trúc dữ liệu !==cấu trúc dữ liệu.

Mã bắt đầu

Sau khi chúng tôi khởi động ứng dụng của mình, hãy mở BookDetails.jsxthành phần và lưu lại. Điều đầu tiên chúng ta có thể nhận thấy trong máy chủ nhà phát triển React của mình là một điểm chung WARNINGmà các nhà phát triển trẻ có xu hướng bỏ qua. Khi bạn bắt đầu làm việc và bắt đầu viết mã cho sản xuất, những lời nói dối của bạn sẽ còn nghiêm ngặt hơn những gì được tích hợp trong create-react-app. WARNINGSsẽ chuyển sang ERRORS, và một số linters sẽ không cho phép bạn đẩy trước khi bạn xử lý những ERRORS.

Vì vậy, thay vì bỏ qua nó, hãy tìm cách điều trị nó.

LƯU Ý: trước tiên bạn có thể cần lưu lại BookDetails.jsxđể tạo cái nàyWARNING

Nếu chúng ta đào sâu vào React Docs , chúng ta có thể giải mã các giải pháp được đề xuất hơi khó hiểu cho vấn đề này WARNINGnhư sau:

1. Bao gồm định nghĩa hàm bên trong tệp useEffect.

• Chúng tôi không thể gọi chức năng này ở nơi khác trừ khi chúng tôi xác định lại nó.

• Điều này sẽ kích hoạt useEffect mỗi khi trạng thái hoặc đạo cụ thay đổi, đôi khi gây ra kết xuất lại vô hạn. Và trong trường hợp của chúng tôi, vì chúng tôi đang gọi hàm thiết lập trạng thái của mình sau một lệnh gọi API, nên nó có thể làm quá tải API của chúng tôi với các yêu cầu điểm cuối vô hạn.

• Chức năng sẽ không được gọi.

• Lần đầu tiên thành phần kết xuất, nó sẽ xác định chức năng của chúng ta, điều này sẽ kích hoạt useEffect, điều này sẽ khiến thành phần kết xuất lại, điều này sẽ xác định lại chức năng, điều này sẽ kích hoạt điều này useEffect, điều này sẽ khiến thành phần kết xuất lại, điều này sẽ xác định lại chức năng…

Giải pháp đơn giản và ưa thích nhất là 'bao gồm nó', nghĩa là di chuyển getBookDetailsđịnh nghĩa hàm bên trong tệp useEffect. Điều này tuân thủ nguyên tắc Lập trình hướng đối tượng được gọi là Đóng gói .

Nhưng giả sử chúng ta biết mình cần gọi hàm ở nơi khác. Chúng ta có nên xác định lại nó sau này? Đó không phải là rất KHÔ của chúng tôi.

Hãy thay đổi mảng phụ thuộc của chúng ta để bao gồm tham chiếu hàm của chúng ta. Bây giờ của bạn useEffectsẽ trông như thế này.

Và getBookDetailsvẫn được xác định ở trên useEffect.

Bây giờ chúng ta có một cái mớiWARNING

Nhập useCallback Hook

Nói tóm lại, useCallbackhook cho phép bạn lưu vào bộ đệm hoặc 'ghi nhớ', một chức năng giữa các lần kết xuất lại thành phần của bạn. Nó thực hiện một nhiệm vụ tương tự như useMemo, các sắc thái mà chúng ta sẽ đề cập trong một bài viết khác.

Nếu chi tiết cốt lõi của điều này khiến bạn quan tâm, bạn có thể đọc thêm trong tài liệu React .

Xin lưu ý cảnh báo của họ:

Bạn chỉ nên dựa vào useCallbackđể tối ưu hóa hiệu suất. Nếu mã của bạn không hoạt động nếu không có nó, hãy tìm ra vấn đề tiềm ẩn và khắc phục nó trước. Sau đó, bạn có thể thêm useCallbackđể cải thiện hiệu suất.

useCallbackcú pháp

useCallbackCú pháp của rất giống với useEffectcú pháp của chúng ta đã biết. Nhìn vào bộ xương của mỗi người.

Sự khác biệt nhỏ là với useEffect, chúng tôi yêu cầu hàm ẩn danh thực thi chức năng của chúng tôi trong khi với useCallback, chúng tôi gán giá trị trả về cho một tham chiếu sẽ được gọi ở nơi khác.

Sử dụng useCallback

Đầu tiên, chúng tôi sẽ nhập useCallbacktừ 'react'. Thay vì thêm một dòng mới, tốt nhất là hủy cấu trúc nó cùng với các mục nhập khác của chúng tôi.

Bây giờ chúng ta có thể gán getBookDetailscho giá trị được trả về từ một useCallbacklệnh gọi hàm.

Sau đó, chúng tôi thêm tất cả cú pháp cho useCallback. Hãy nhớ mảng phụ thuộc của bạn!

Trong ví dụ của chúng tôi, chúng tôi cần asynctrước các tham số của mình.

Và cuối cùng, chúng tôi thêm logic của hàm vào khối mã.

Khi chúng tôi lưu, chúng tôi nhận được… một tệp WARNING.

Tại sao mảng phụ thuộc của chúng ta nên theo dõi idbiến?

Hãy suy nghĩ về điều này.

• Nếu giá trị của idthay đổi, getBookDetailscần phải đạt đến một điểm cuối khác, vì vậy React nên xác định lại nó. Định nghĩa của getBookDetailsnghĩa đen phụ thuộc vào giá trị của id.

Và cuối cùng, đó là nó! Chúng tôi thấy màu xanh lục trong máy chủ nhà phát triển React của chúng tôi. Một kẻ nói dối vui vẻ là một Senior Developer hạnh phúc. Và một Senior Developer hạnh phúc là bạn hạnh phúc!

Tôi luôn tìm kiếm những người bạn và đồng nghiệp mới. Nếu bạn thấy bài viết này hữu ích và muốn kết nối, bạn có thể tìm thấy tôi tại bất kỳ nhà nào của tôi trên web.

GitHub | Twitter | LinkedIn | Trang mạng

Tài nguyên

• bình đẳng tham chiếu
• Các kiểu dữ liệu nguyên thủy của JavaScript so với cấu trúc dữ liệu
• đóng gói
• useCallback
• Tài liệu phản ứng