Kết xuất lại xảy ra khi React cần cập nhật ứng dụng với một số dữ liệu mới. Thông thường, điều này xảy ra do người dùng tương tác với ứng dụng hoặc một số dữ liệu bên ngoài đến thông qua một yêu cầu không đồng bộ hoặc một số mô hình đăng ký
Các ứng dụng không tương tác không có bất kỳ bản cập nhật dữ liệu không đồng bộ nào sẽ không bao giờ kết xuất lại và do đó không cần quan tâm đến việc tối ưu hóa hiệu suất kết xuất lại
Kết xuất lại cần thiết - kết xuất lại một thành phần là nguồn gốc của các thay đổi hoặc một thành phần trực tiếp sử dụng thông tin mới. Ví dụ: nếu người dùng nhập vào trường đầu vào, thành phần quản lý trạng thái của nó cần tự cập nhật trên mỗi lần nhấn phím, i. e. kết xuất lại
Kết xuất lại không cần thiết - kết xuất lại của một thành phần được truyền qua ứng dụng thông qua các cơ chế kết xuất lại khác nhau do lỗi hoặc kiến trúc ứng dụng không hiệu quả. Ví dụ: nếu người dùng nhập vào trường nhập liệu và toàn bộ trang hiển thị lại trên mỗi lần nhấn phím, thì trang đó đã được hiển thị lại một cách không cần thiết
Tự kết xuất lại không cần thiết không phải là vấn đề. Phản ứng rất nhanh và thường có thể xử lý chúng mà người dùng không nhận thấy bất cứ điều gì
Tuy nhiên, nếu việc kết xuất lại xảy ra quá thường xuyên và/hoặc trên các thành phần rất nặng, điều này có thể dẫn đến trải nghiệm người dùng bị “lag”, độ trễ có thể nhìn thấy trên mọi tương tác hoặc thậm chí ứng dụng trở nên hoàn toàn không phản hồi
Có bốn lý do tại sao một thành phần sẽ tự kết xuất lại. thay đổi trạng thái, kết xuất lại cha mẹ [hoặc con cái], thay đổi ngữ cảnh và thay đổi hook. Ngoài ra còn có một huyền thoại lớn. re-render xảy ra khi props của component thay đổi. Bản thân nó không đúng [xem phần giải thích bên dưới]
Khi trạng thái của một thành phần thay đổi, nó sẽ tự hiển thị lại. Thông thường, nó xảy ra trong một cuộc gọi lại hoặc trong useEffect hook
Thay đổi trạng thái là nguồn gốc của tất cả các kết xuất lại
Xem ví dụ trong mã và hộp
Một thành phần sẽ tự kết xuất lại nếu cha của nó kết xuất lại. Hoặc, nếu chúng ta nhìn điều này từ hướng ngược lại. khi một thành phần kết xuất lại, nó cũng kết xuất lại tất cả các thành phần con của nó
Nó luôn đi "xuống" cây. kết xuất lại của một đứa trẻ không kích hoạt kết xuất lại của cha mẹ. [Có một vài lưu ý và trường hợp cạnh ở đây, xem hướng dẫn đầy đủ để biết thêm chi tiết. Bí ẩn của React Element, trẻ em, cha mẹ và kết xuất lại]
Xem ví dụ trong mã và hộp
Khi giá trị trong Trình cung cấp ngữ cảnh thay đổi, tất cả các thành phần sử dụng Ngữ cảnh này sẽ kết xuất lại, ngay cả khi chúng không trực tiếp sử dụng phần dữ liệu đã thay đổi. Những kết xuất lại đó không thể được ngăn chặn trực tiếp bằng ghi nhớ, nhưng có một vài cách giải quyết có thể mô phỏng nó [xem phần ]
Xem ví dụ trong mã và hộp
Mọi thứ đang diễn ra bên trong hook “thuộc về” thành phần sử dụng nó. Các quy tắc tương tự về thay đổi Bối cảnh và Trạng thái áp dụng tại đây
- thay đổi trạng thái bên trong hook sẽ kích hoạt kết xuất lại không thể ngăn chặn của thành phần “máy chủ”
- nếu móc sử dụng Ngữ cảnh và giá trị của Ngữ cảnh thay đổi, nó sẽ kích hoạt việc đăng ký lại không thể ngăn chặn của thành phần “máy chủ”
Móc có thể được xích. Mọi móc đơn bên trong chuỗi vẫn “thuộc về” thành phần “máy chủ” và các quy tắc tương tự áp dụng cho bất kỳ thành phần nào trong số chúng
Xem ví dụ trong mã và hộp
Việc props của component có thay đổi hay không không quan trọng khi nói về re-render của các component không được ghi nhớ
Để props thay đổi, chúng cần được cập nhật bởi component cha. Điều này có nghĩa là cha mẹ sẽ phải kết xuất lại, điều này sẽ kích hoạt kết xuất lại thành phần con bất kể đạo cụ của nó là gì
Xem ví dụ trong mã và hộp
Chỉ khi các kỹ thuật ghi nhớ được sử dụng [_______1, useMemo], thì việc thay đổi đạo cụ mới trở nên quan trọng
Tạo các thành phần bên trong chức năng kết xuất của một thành phần khác là một kiểu mẫu có thể là kẻ giết người hiệu suất lớn nhất. Trên mỗi lần kết xuất lại, React sẽ gắn kết lại thành phần này [tôi. e. phá hủy nó và tạo lại nó từ đầu], sẽ chậm hơn nhiều so với kết xuất lại thông thường. Trên hết, điều này sẽ dẫn đến các lỗi như
- có thể "nhấp nháy" nội dung trong quá trình kết xuất lại
- trạng thái được đặt lại trong thành phần với mỗi lần kết xuất lại
- useEffect không có phụ thuộc được kích hoạt trên mỗi lần kết xuất lại
- nếu một thành phần được tập trung, tiêu điểm sẽ bị mất
Xem ví dụ trong mã và hộp
Tài nguyên bổ sung để đọc. Cách viết mã React hiệu quả. quy tắc, khuôn mẫu, nên làm và không nên làm
Mẫu này có thể có lợi khi một thành phần nặng quản lý trạng thái và trạng thái này chỉ được sử dụng trên một phần nhỏ bị cô lập của cây kết xuất. Một ví dụ điển hình sẽ là mở/đóng hộp thoại bằng một nút bấm trong một thành phần phức tạp hiển thị một phần quan trọng của trang
Trong trường hợp này, trạng thái kiểm soát giao diện hộp thoại phương thức, chính hộp thoại và nút kích hoạt cập nhật có thể được gói gọn trong một thành phần nhỏ hơn. Kết quả là, thành phần lớn hơn sẽ không hiển thị lại trên những thay đổi trạng thái đó
Xem ví dụ trong mã và hộp
Tài nguyên bổ sung để đọc. Bí ẩn của React Element, trẻ em, cha mẹ và kết xuất lại, Cách viết mã React hiệu quả. quy tắc, khuôn mẫu, nên làm và không nên làm
Đây cũng có thể gọi là “trạng thái quấn lấy trẻ”. Mô hình này tương tự như “chuyển trạng thái xuống”. nó gói gọn các thay đổi trạng thái trong một thành phần nhỏ hơn. Sự khác biệt ở đây là trạng thái được sử dụng trên một phần tử bao bọc một phần chậm của cây kết xuất, vì vậy nó không thể được trích xuất dễ dàng như vậy. Một ví dụ điển hình sẽ là các cuộc gọi lại onScroll hoặc onMouseMove được gắn vào phần tử gốc của một thành phần
Trong tình huống này, quản lý trạng thái và các thành phần sử dụng trạng thái đó có thể được trích xuất thành một thành phần nhỏ hơn và thành phần chậm có thể được chuyển cho nó dưới dạng children. Từ góc độ thành phần nhỏ hơn, children chỉ là chỗ dựa, vì vậy chúng sẽ không bị ảnh hưởng bởi thay đổi trạng thái và do đó sẽ không kết xuất lại
Xem ví dụ trong mã và hộp
Tài nguyên bổ sung để đọc. Bí ẩn của React Element, trẻ em, cha mẹ và kết xuất lại
Khá giống với mẫu trước đó, với cùng một hành vi. nó đóng gói trạng thái bên trong một thành phần nhỏ hơn và các thành phần nặng được truyền cho nó dưới dạng đạo cụ. Đạo cụ không bị ảnh hưởng bởi thay đổi trạng thái, vì vậy các thành phần nặng sẽ không kết xuất lại
Có thể hữu ích khi một vài thành phần nặng độc lập với trạng thái, nhưng không thể trích xuất khi còn nhỏ theo nhóm
Xem ví dụ trong mã và hộp
Đọc thêm về việc chuyển các thành phần dưới dạng đạo cụ tại đây. Thành phần phản ứng như prop. đúng cách™️, Bí ẩn của React Element, trẻ em, cha mẹ và kết xuất lại
Gói một thành phần trong React.memo sẽ dừng chuỗi kết xuất lại xuôi dòng được kích hoạt ở đâu đó trên cây kết xuất, trừ khi các đạo cụ của thành phần này đã thay đổi
Điều này có thể hữu ích khi kết xuất một thành phần nặng không phụ thuộc vào nguồn kết xuất lại [i. e. trạng thái, dữ liệu đã thay đổi]
Xem ví dụ trong mã và hộp
Tất cả các props không phải là giá trị nguyên thủy phải được ghi nhớ cho React. bản ghi nhớ để làm việc
Xem ví dụ trong mã và hộp
React.memo phải được áp dụng cho các phần tử được truyền dưới dạng phần tử con/đạo cụ. Ghi nhớ thành phần cha mẹ sẽ không hoạt động. trẻ em và đạo cụ sẽ là đối tượng, vì vậy chúng sẽ thay đổi sau mỗi lần kết xuất lại
Xem tại đây để biết thêm chi tiết về cách hoạt động của tính năng ghi nhớ đối với mối quan hệ giữa trẻ em/cha mẹ. Bí ẩn của React Element, trẻ em, cha mẹ và kết xuất lại
Xem ví dụ trong mã và hộp
Tự ghi nhớ các đạo cụ sẽ không ngăn việc kết xuất lại một thành phần con. Nếu một thành phần cha mẹ kết xuất lại, nó sẽ kích hoạt kết xuất lại thành phần con bất kể đạo cụ của nó là gì
Xem ví dụ trong mã và hộp
Nếu một thành phần con được bọc trong React.memo, tất cả các đạo cụ không phải là giá trị nguyên thủy phải được ghi nhớ
Xem ví dụ trong mã và hộp
Nếu một thành phần sử dụng giá trị không nguyên thủy làm phụ thuộc trong các móc như useEffect, useMemo, React.memo2, thì thành phần đó phải được ghi nhớ
Xem ví dụ trong mã và hộp
Một trong những trường hợp sử dụng cho useMemo là để tránh các tính toán tốn kém trên mỗi lần kết xuất lại
useMemo có chi phí của nó [tiêu tốn một chút bộ nhớ và làm cho kết xuất ban đầu chậm hơn một chút], vì vậy không nên sử dụng nó cho mọi phép tính. Trong React, việc gắn và cập nhật các thành phần sẽ là phép tính tốn kém nhất trong hầu hết các trường hợp [trừ khi bạn đang thực sự tính toán các số nguyên tố, dù sao thì bạn cũng không nên làm điều này ở giao diện người dùng]
Do đó, trường hợp sử dụng điển hình cho useMemo sẽ là ghi nhớ các phần tử React. Thường là các phần của cây kết xuất hiện có hoặc kết quả của cây kết xuất được tạo, chẳng hạn như hàm bản đồ trả về các phần tử mới
Chi phí cho các hoạt động javascript “thuần túy” như sắp xếp hoặc lọc một mảng thường không đáng kể, so với các bản cập nhật thành phần
Xem ví dụ trong mã và hộp
Ngoài các quy tắc và mẫu kết xuất lại thông thường, thuộc tính React.memo6 có thể ảnh hưởng đến hiệu suất của danh sách trong React
Quan trọng. chỉ cung cấp thuộc tính React.memo6 sẽ không cải thiện hiệu suất của danh sách. Để ngăn kết xuất lại các thành phần danh sách, bạn cần gói chúng trong React.memo và làm theo tất cả các phương pháp hay nhất của nó
Giá trị trong React.memo6 phải là một chuỗi, nhất quán giữa các lần kết xuất lại cho mọi phần tử trong danh sách. Thông thường, useMemo0 của mục hoặc useMemo1 của mảng được sử dụng cho mục đích đó
Bạn có thể sử dụng useMemo1 của mảng làm khóa, nếu danh sách là tĩnh, tôi. e. các phần tử không được thêm/xóa/chèn/sắp xếp lại
Sử dụng chỉ mục của mảng trên danh sách động có thể dẫn đến
- lỗi nếu các mục có trạng thái hoặc bất kỳ phần tử không được kiểm soát nào [như đầu vào biểu mẫu]
- giảm hiệu suất nếu các mục được gói trong React. bản ghi nhớ
Đọc về điều này chi tiết hơn ở đây. Thuộc tính khóa phản ứng. thực tiễn tốt nhất cho danh sách hiệu suất
Xem ví dụ trong Codesandbox - danh sách tĩnh
Xem ví dụ trong Codesandbox - Dynamic List
Không bao giờ được sử dụng các giá trị được tạo ngẫu nhiên làm giá trị trong thuộc tính React.memo6 trong danh sách. Chúng sẽ dẫn đến việc React gắn lại các mục trên mỗi lần kết xuất lại, điều này sẽ dẫn đến
- hiệu suất rất kém của danh sách
- lỗi nếu các mục có trạng thái hoặc bất kỳ phần tử không được kiểm soát nào [như đầu vào biểu mẫu]
Xem ví dụ trong mã và hộp
Nếu Trình cung cấp bối cảnh không được đặt ở gốc của ứng dụng và có khả năng nó có thể tự kết xuất lại do những thay đổi trong tổ tiên của nó, giá trị của nó sẽ được ghi nhớ
Xem ví dụ trong mã và hộp
Nếu trong Ngữ cảnh có sự kết hợp giữa dữ liệu và API [getters và setters], chúng có thể được chia thành các Nhà cung cấp khác nhau trong cùng một thành phần. Bằng cách đó, các thành phần chỉ sử dụng API sẽ không kết xuất lại khi dữ liệu thay đổi
Đọc thêm về mô hình này ở đây. Cách viết ứng dụng React hiệu quả với Ngữ cảnh
Xem ví dụ trong mã và hộp
Nếu Ngữ cảnh quản lý một vài khối dữ liệu độc lập, chúng có thể được chia thành các nhà cung cấp nhỏ hơn dưới cùng một nhà cung cấp. Bằng cách đó, chỉ những người tiêu dùng của đoạn đã thay đổi mới kết xuất lại
Đọc thêm về mô hình này ở đây. Cách viết ứng dụng React hiệu quả với Ngữ cảnh
Xem ví dụ trong mã và hộp
Không có cách nào để ngăn một thành phần sử dụng một phần giá trị Ngữ cảnh hiển thị lại, ngay cả khi phần dữ liệu đã sử dụng không thay đổi, ngay cả với móc nối useMemo