Có gì mới trong React v18?

React v18 được chờ đợi từ lâu cuối cùng đã được phát hành cách đây vài tháng. Mặc dù không có thay đổi lớn nào, nhưng đã có một số tính năng thú vị được bổ sung đáng để xem qua. Bài viết này sẽ giới thiệu cho các bạn một số bổ sung mới và cách nâng cấp lên React v18.

Cách nâng cấp lên React 18

Để cài đặt phiên bản React mới nhất, hãy chạy lệnh này trong một thiết bị đầu cuối:

npm install react react-dom

Hoặc nếu bạn đang sử dụng sợi:

yarn add react react-dom

Khi bạn đã cài đặt phiên bản mới nhất, bạn có thể bắt đầu tận dụng các tính năng mới của nó.

Có một số bổ sung trong React 18; đây là bốn trong số những điều đáng chú ý nhất.

1. Chế độ nghiêm ngặt

Chế độ nghiêm ngặt là một tính năng bạn có thể sử dụng để làm nổi bật các vấn đề tiềm ẩn trong một ứng dụng. Kiểm tra chế độ nghiêm ngặt chỉ chạy trong chế độ phát triển và sẽ không ảnh hưởng đến quá trình sản xuất. Tuy nhiên, chúng có thể rất hữu ích trong việc xác định các vấn đề tiềm ẩn trong mã của bạn.

Bạn có thể bật chế độ nghiêm ngặt cho bất kỳ phần nào trong ứng dụng của mình. Ví dụ: bạn có thể bật nó cho tất cả các thành phần của mình hoặc chỉ cho một số thành phần trong số đó.

import React from 'react';
function DemoExample() {
return (
<div>
<FirstComponent />
<React.StrictMode>
<SecondComponent />
<ThirdComponent />
</React.StrictMode>
<FourthComponent />
</div>
);
}

Trong đoạn mã trên, tất cả bốn thành phần sẽ được kiểm tra các vấn đề tiềm ẩn. Tuy nhiên, kiểm tra chế độ nghiêm ngặt sẽ chỉ áp dụng cho và .

Chế độ nghiêm ngặt cũng hỗ trợ theo những cách khác, chẳng hạn như:

• Xác định các thành phần có vòng đời không an toàn: Nếu một thành phần có phương thức vòng đời được đánh dấu là không an toàn, chế độ nghiêm ngặt sẽ cảnh báo bạn về điều đó.
• Cảnh báo về việc sử dụng API tham chiếu chuỗi kế thừa: Nếu bạn đang sử dụng API ref của chuỗi kế thừa, chế độ nghiêm ngặt sẽ cảnh báo bạn về việc sử dụng nó.
• Cảnh báo về việc sử dụng findDOMNode không được dùng nữa: Nếu bạn đang sử dụng API findDOMNode không được dùng nữa, chế độ nghiêm ngặt sẽ cảnh báo bạn về điều đó.
• Phát hiện các tác dụng phụ không mong muốn: Nếu một thành phần đang gây ra các tác dụng phụ (chẳng hạn như setState) ở những nơi không mong muốn, chế độ nghiêm ngặt sẽ cảnh báo bạn về điều đó.
• Phát hiện API ngữ cảnh kế thừa: Nếu bạn đang sử dụng API ngữ cảnh kế thừa (hiện không được dùng nữa), chế độ nghiêm ngặt sẽ cảnh báo bạn về điều đó.
• Đảm bảo trạng thái có thể tái sử dụng: Nếu bạn có một trạng thái được sử dụng bởi nhiều thành phần, chế độ nghiêm ngặt sẽ giúp đảm bảo rằng nó được đồng bộ hóa đúng cách.

Nhìn chung, chế độ nghiêm ngặt có thể là một tính năng hữu ích trong quá trình phát triển để giúp xác định các vấn đề tiềm ẩn trong mã của bạn.

2. Chuyển tiếp

Quá trình chuyển đổi cho phép bạn đánh dấu các bản cập nhật giao diện người dùng nhất định là không khẩn cấp. Điều này có nghĩa là React có thể ưu tiên các bản cập nhật khác quan trọng hơn.

Ví dụ: nếu bạn có hai trường văn bản — một cho truy vấn tìm kiếm và một cho kết quả — bạn muốn đánh dấu trường văn bản kết quả tìm kiếm là một chuyển tiếp. Bằng cách đó, React biết rằng nó không cần phải kết xuất lại trường văn bản đó một cách khẩn cấp mỗi khi người dùng nhập nội dung nào đó vào trường văn bản truy vấn tìm kiếm.

Bạn có thể sử dụng hàm startTransition để đánh dấu một bản cập nhật giao diện người dùng là một quá trình chuyển đổi. Đây là một ví dụ:

import { startTransition } from 'react';
startTransition(() => {
});

Mã này sẽ đánh dấu tất cả các cập nhật trạng thái bên trong hàm startTransition là chuyển tiếp. Bằng cách đó, React có thể tập trung vào các bản cập nhật giao diện người dùng quan trọng hơn khác.

3. Batch tự động

React cung cấp một tính năng hữu ích được gọi là phân lô giúp giảm số lần hiển thị lại diễn ra khi trạng thái thay đổi. Điều này có thể rất hữu ích trong việc tối ưu hóa hiệu suất, đặc biệt là khi làm việc với mã không đồng bộ.

Trước đây, nếu bạn đã hứa hoặc đang thực hiện cuộc gọi mạng, các bản cập nhật trạng thái sẽ không được thực hiện theo đợt và React sẽ phải hiển thị lại nhiều lần. Tuy nhiên, với tính năng tự động chia lô trong React 18, tất cả các bản cập nhật trạng thái đều được thực hiện theo lô, ngay cả trong các lần hứa, setTimeouts và gọi lại sự kiện. Điều này làm giảm đáng kể công việc mà React phải làm trong nền.

Bạn có thể cập nhật hàng loạt trạng thái theo cách thủ công bằng cách sử dụng chức năng flushSync, nhưng kể từ React 18, quá trình này hiện là tự động. Điều này dẫn đến hiệu suất tốt hơn nhiều, vì React sẽ đợi một tác vụ vi mô kết thúc trước khi hiển thị lại.

4. Móc mới

Phiên bản 18 giới thiệu nhiều móc React mới, bao gồm useId, useTransition và useDeferredValue. Những Hooks mới này cung cấp một cách tuyệt vời để thêm chức năng bổ sung vào ứng dụng React của bạn mà không tốn nhiều công sức.

React 18 giúp tăng hiệu suất ứng dụng

React 18 đã có mặt ở đây và nó mang lại một số cải tiến tuyệt vời cho hiệu suất ứng dụng web. Với phiên bản React mới, bạn có thể dễ dàng tạo các ứng dụng web đáp ứng nhanh hơn và hoạt động tổng thể tốt hơn. Vì vậy, nếu bạn đang muốn tạo một ứng dụng web chạy mượt mà và trông tuyệt vời, hãy nhớ xem React 18.