Kết xuất lại phần tử html Javascript
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 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
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, 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ư
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 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 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 Đ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
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 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ư Xem ví dụ trong mã và hộp Một trong những trường hợp sử dụng cho
Do đó, trường hợp sử dụng điển hình cho 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 Quan trọng. chỉ cung cấp thuộc tính Giá trị trong Bạn có thể sử dụng Sử dụng chỉ mục của mảng trên danh sách động có thể dẫn đến
Đọ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
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 |