Tổng quan
Phiên bản React Native 0.79 vừa ra mắt với hàng loạt cải tiến và tính năng mới, đặc biệt là khả năng tăng tốc công cụ phát triển, giúp các lập trình viên thao tác nhanh hơn, mượt mà hơn. Từ giờ, công việc phát triển ứng dụng sẽ trở nên dễ dàng và hiệu quả hơn bao giờ hết! 😎🔧
Các điểm nổi bật có thể kể đến như:
- Cải tiến công cụ: Các công cụ xây dựng và biên dịch nhanh hơn giúp rút ngắn thời gian phát triển.
- Tính năng mới mẻ: Hỗ trợ các API và thư viện cập nhật, giúp cải thiện hiệu suất và sự ổn định của ứng dụng.
- Tối ưu hóa hiệu suất: Thực thi mã nhanh hơn, giảm thiểu độ trễ trong quá trình phát triển.
Với React Native 0.79, giờ đây bạn có thể phát triển ứng dụng nhanh chóng, mượt mà và đầy tính năng! 🎉
Highlights
Metro: Faster startup and package exports support
This release ships with Metro 0.82.This version uses deferred hashing to improve the speed of first yarn start typically by over 3x (more in larger projects and monorepos) making your development experience and CI builds faster on a daily basis. https://reactnative.dev/assets/images/0.79-metro-startup-comparison-a0d91930645092758a8d47b4d02c0b09.gif
Metro 0.82 - Hỗ trợ xuất nhập khẩu package.json ổn định! 🔧📦
Trong phiên bản Metro 0.82, chúng ta đã chính thức đưa tính năng package.json exports và imports field resolution vào trạng thái ổn định. Tính năng xuất khẩu được giới thiệu từ React Native 0.72, trong khi hỗ trợ nhập khẩu được thêm vào nhờ một đóng góp từ cộng đồng - và giờ đây, cả hai tính năng này sẽ được bật mặc định trong tất cả các dự án sử dụng React Native 0.79.
Điều này mang lại:
- Tương thích tốt hơn với các phụ thuộc npm hiện đại: Giúp dự án của bạn dễ dàng tích hợp với các thư viện và package mới nhất.
- Cải tiến cách tổ chức dự án: Mở ra những cách thức tổ chức dự án mới, chuẩn mực hơn, phù hợp với các tiêu chuẩn của ngành.
Giờ đây, với Metro 0.82, bạn sẽ có một công cụ phát triển hiện đại, giúp dự án của bạn hoạt động ổn định và dễ dàng tích hợp với các thư viện bên ngoài!
JSC chuyển sang Community Package - Một bước tiến lớn!
Nhằm giảm bớt diện tích API của React Native, nhóm phát triển đang tiến hành chuyển JavaScriptCore (JSC) sang một package được cộng đồng duy trì: @react-native-community/javascriptcore.
Đối với những ai đang sử dụng Hermes, thay đổi này sẽ không ảnh hưởng gì cả.
Từ React Native 0.79 trở đi, bạn có thể sử dụng phiên bản JSC được cộng đồng hỗ trợ bằng cách làm theo hướng dẫn cài đặt trong file README. Phiên bản JSC do React Native cung cấp vẫn sẽ có sẵn trong 0.79, nhưng sẽ được loại bỏ trong thời gian tới.
Việc chuyển JSC sang package cộng đồng sẽ giúp chúng ta:
- Cập nhật JSC nhanh chóng và thường xuyên hơn.
- Cung cấp các tính năng mới nhất cho người dùng.
- JSC cộng đồng sẽ có lịch phát hành riêng biệt với React Native.
Đây là một bước đi quan trọng để cải thiện khả năng cập nhật và linh hoạt cho các nhà phát triển khi làm việc với JSC trong tương lai!
iOS: Đăng ký Native Modules tương thích với Swift
Trong phiên bản mới này, React Native đang thay đổi cách bạn đăng ký Native Module vào môi trường runtime. Phương pháp mới này sẽ tuân theo cùng một cách tiếp cận với các component, như đã được mô tả trong tài liệu chính thức.
Từ phiên bản này của React Native, bạn có thể đăng ký các mô-đun của mình bằng cách chỉnh sửa tệp package.json. Cụ thể, một trường modulesProvider mới đã được thêm vào thuộc tính ios trong file này.
"codegenConfig": { "ios": {
+ "modulesProvider": {
+ "JS Name for the module": "ObjC Module provider for the pure C++ TM or a class conforming to RCTTurboModule"
+ } }
}
Codegen sẽ tự động tạo ra tất cả mã liên quan bắt đầu từ tệp package.json của bạn.
Với phương pháp mới này, chúng tôi đã thống nhất cách đăng ký Native Modules cho cả các nhà phát triển ứng dụng và người duy trì thư viện. Các thư viện có thể chỉ định cùng một thuộc tính trong tệp package.json và Codegen sẽ lo phần còn lại.
Phương pháp này giải quyết hạn chế mà chúng tôi đã giới thiệu trong phiên bản 0.77, vốn ngăn cản việc đăng ký một Native Module thuần C++ với một Swift AppDelegate. Như bạn có thể thấy, không có thay đổi nào ảnh hưởng đến AppDelegate và mã được tạo ra sẽ hoạt động cho AppDelegate được triển khai bằng cả Swift và Objective-C.
Android: Tăng Tốc Thời Gian Khởi Động Ứng Dụng
Các nhà phát triển đang triển khai một thay đổi để cải thiện thời gian khởi động ứng dụng Android của bạn một cách đáng kể.
Bắt đầu từ phiên bản này, chúng tôi sẽ không nén bundle JavaScript trong APK nữa. Trước đây, hệ thống Android cần phải giải nén bundle JavaScript trước khi ứng dụng có thể khởi động, điều này gây ra sự chậm trễ đáng kể trong quá trình khởi động ứng dụng.
Từ phiên bản này, bundle JavaScript sẽ được gửi đi dưới dạng chưa nén mặc định, giúp ứng dụng Android của bạn khởi động nhanh hơn.
Nhóm Margelo đã thử nghiệm tính năng này trên ứng dụng Discord và nhận được sự cải thiện hiệu suất đáng kể: thời gian tương tác (TTI) của Discord giảm 400ms, tương đương với việc tăng tốc 12% chỉ với một thay đổi một dòng mã (được thử nghiệm trên Samsung A14).
Tuy nhiên, việc lưu trữ bundle chưa nén sẽ dẫn đến việc chiếm dụng không gian bộ nhớ cao hơn trên thiết bị người dùng. Nếu điều này là mối quan tâm của bạn, bạn có thể bật hoặc tắt tính năng này bằng cách sử dụng thuộc tính enableBundleCompression trong tệp app/build.gradle.
app/build.gradle
react { // ... // If you want to compress the JS bundle (slower startup, less // space consumption) enableBundleCompression = true // If don't you want to compress the JS bundle (faster startup, // higher space consumption) enableBundleCompression = false // Default is `false`
}
Các Thay Đổi Quan Trọng
Loại Bỏ Remote JS Debugging
Như một phần trong nỗ lực cải thiện quy trình gỡ lỗi, chúng tôi sẽ loại bỏ phương thức Remote JS Debugging qua Chrome. Phương pháp gỡ lỗi này đã bị deprecated và chuyển sang dạng opt-in runtime từ React Native 0.73. Hãy sử dụng React Native DevTools để gỡ lỗi hiện đại và đáng tin cậy hơn.
Điều này cũng có nghĩa là React Native không còn tương thích với dự án cộng đồng react-native-debugger. Đối với các nhà phát triển muốn sử dụng các tiện ích gỡ lỗi bên thứ ba, chẳng hạn như Redux DevTools, chúng tôi khuyên bạn nên sử dụng Expo DevTools Plugins, hoặc tích hợp các phiên bản độc lập của các công cụ này.
Đọc thêm trong bài viết chuyên biệt này.
Cập Nhật Các Mô-đun Nội Bộ Để Dùng Cú Pháp Export Như một phần trong việc hiện đại hóa mã nguồn JavaScript, chúng tôi đã cập nhật một số mô-đun thực thi trong react-native để sử dụng cú pháp export thay vì module.exports.
Chúng tôi đã cập nhật khoảng 46 API tổng cộng, có thể tìm thấy trong changelog.
Các Thay Đổi Quan Trọng Khác ⚠️
Độ dài không có đơn vị trong box-shadow và filter không còn hợp lệ:
Để làm cho React Native tuân thủ chặt chẽ hơn với các đặc tả CSS/Web, chúng tôi không còn hỗ trợ các độ dài không có đơn vị trong box-shadow và filter. Điều này có nghĩa là nếu bạn đang sử dụng box-shadow như 1 1 black, chúng tôi sẽ không hiển thị. Thay vào đó, bạn nên chỉ định đơn vị, ví dụ: 1px 1px black.
Loại bỏ cú pháp hwb() sai trong normalize-color:
Để làm cho React Native tuân thủ tốt hơn các đặc tả CSS/Web, chúng tôi đã hạn chế một số cú pháp không hợp lệ cho hàm hwb(). Trước đây, React Native hỗ trợ giá trị phân cách bằng dấu phẩy (ví dụ: hwb(0, 0%, 100%)), nhưng hiện tại chúng tôi không còn hỗ trợ cú pháp này nữa. Bạn nên chuyển sang cú pháp hwb(0 0% 100%). Bạn có thể tìm hiểu thêm về thay đổi này tại đây.
Update export của Libraries/Core/ExceptionsManager:
Như một phần trong nỗ lực hiện đại hóa API JavaScript của React Native, chúng tôi đã cập nhật ExceptionsManager để xuất khẩu một đối tượng ExceptionsManager mặc định và SyntheticError như là một xuất khẩu thứ cấp.
Upgrade to 0.79
Để tạo dự án react native 0.79:
npx @react-native-community/cli@latest init MyProject --version latest
Nếu bạn sử dụng Expo, React Native 0.79 sẽ được hỗ trợ trong Expo SDK 53 sắp tới như là phiên bản mặc định của React Native.