Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Cách xử lý các tập lệnh của bên thứ ba của React 19 khác với các phiên bản trước


Cách xử lý các tập lệnh của bên thứ ba của React 19 khác với các phiên bản trước


React 19 giới thiệu những cải tiến đáng kể trong cách xử lý các tập lệnh của bên thứ ba và phần mở rộng trình duyệt trong quá trình hydrat hóa, mang lại trải nghiệm mượt mà hơn so với các phiên bản trước. Đây là những khác biệt chính:

Bỏ qua thẻ không mong muốn

Trong React 19, nếu sự khác biệt được phát hiện do sửa đổi được thực hiện bởi các tập lệnh hoặc phần mở rộng của bên thứ ba, hãy phản ứng thông minh qua các thẻ bất ngờ thay vì kích hoạt các lỗi kết xuất lại [1] [2]. Cách tiếp cận này giảm thiểu sự gián đoạn tiềm năng gây ra bởi các tập lệnh bên ngoài, đảm bảo trải nghiệm người dùng liền mạch hơn.

Bảo quản các kiểu dáng

Khi React cần hiển thị lại toàn bộ tài liệu do sự không phù hợp hydrat hóa không liên quan đến sửa đổi của bên thứ ba, giờ đây nó vẫn bảo tồn bất kỳ bảng kiểu nào được chèn bởi các tập lệnh đó [1] [2]. Tăng cường này duy trì tính toàn vẹn trực quan của ứng dụng, ngay cả khi phát hiện sự khác biệt.

Cải thiện khả năng tương thích

React 19 tăng cường khả năng tương thích hydrat hóa bằng cách bỏ qua các thẻ bất ngờ trong các phần `` và `` của tài liệu [2]. Điều này có nghĩa là nếu một tập lệnh của bên thứ ba đã chèn các phần tử không khớp với HTML do máy chủ tạo, React sẽ không cố gắng điều chỉnh những khác biệt này, tránh các lỗi và gián đoạn tiềm năng.

giảm lỗi

Trong các phiên bản trước, các sửa đổi được thực hiện bởi các tập lệnh của bên thứ ba có thể dẫn đến các lỗi hydrat hóa vì React sẽ cố gắng điều hòa HTML được tạo máy chủ với HTML phía máy khách đã sửa đổi [2]. React 19 giải quyết vấn đề này bằng cách bỏ qua các sửa đổi này trong quá trình hydrat hóa, cho phép ứng dụng hoạt động trơn tru mà không bị ảnh hưởng bởi những thay đổi bên ngoài.

Những cải tiến trong React 19 giúp tăng cường sự mạnh mẽ của hydrat hóa và cung cấp trải nghiệm phát triển mượt mà hơn bằng cách giảm tần suất và tác động của các lỗi hydrat hóa liên quan đến các tương tác của bên thứ ba.

Trích dẫn:
[1] https://webdeveloper.beehiiv.com/p/react-19-beta-release-quick-guide
[2] https://www.ghazikhan.in/blog/exploring-whats-new-in-react-19
[3] https://www.metizsoft.com/blog/react-19-latest-features-and-updates
[4] https://taglineinfotech.com/react-19-p
[5] https://www.kellton.com/kellton-tech-blog/react-19-latest-features-and-updates
.
[7] https://www.epicweb.dev/tips/whats-coming-in-react-19-beta
[8] https://react.dev/blog/2024/04/25/react-19