M

MLOG

Tiếng Việt

Khám phá Chế độ Đồng thời và rendering có thể gián đoạn của React. Tìm hiểu cách sự thay đổi mô hình này cải thiện hiệu suất, độ phản hồi và trải nghiệm người dùng trên toàn cầu.

Chế độ Đồng thời của React: Làm chủ Rendering Có thể Gián đoạn để Nâng cao Trải nghiệm Người dùng

Trong bối cảnh phát triển front-end luôn thay đổi, trải nghiệm người dùng (UX) giữ vai trò tối cao. Người dùng trên toàn thế giới mong đợi các ứng dụng phải nhanh, mượt mà và phản hồi tốt, bất kể thiết bị, điều kiện mạng hay độ phức tạp của tác vụ đang thực hiện. Các cơ chế rendering truyền thống trong các thư viện như React thường gặp khó khăn trong việc đáp ứng những yêu cầu này, đặc biệt là trong các hoạt động tốn nhiều tài nguyên hoặc khi nhiều cập nhật tranh giành sự chú ý của trình duyệt. Đây là lúc Chế độ Đồng thời của React (hiện nay thường được gọi đơn giản là concurrency trong React) xuất hiện, giới thiệu một khái niệm mang tính cách mạng: rendering có thể gián đoạn. Bài viết blog này đi sâu vào sự phức tạp của Chế độ Đồng thời, giải thích rendering có thể gián đoạn có nghĩa là gì, tại sao nó là một yếu tố thay đổi cuộc chơi, và làm thế nào bạn có thể tận dụng nó để xây dựng trải nghiệm người dùng đặc biệt cho khán giả toàn cầu.

Hiểu rõ các Hạn chế của Rendering Truyền thống

Trước khi đi sâu vào sự tuyệt vời của Chế độ Đồng thời, điều cần thiết là phải hiểu những thách thức do mô hình rendering đồng bộ, truyền thống mà React đã sử dụng trong lịch sử. Trong mô hình đồng bộ, React xử lý các cập nhật cho UI từng cái một, theo cách chặn. Hãy tưởng tượng ứng dụng của bạn như một con đường cao tốc một làn. Khi một tác vụ rendering bắt đầu, nó phải hoàn thành hành trình của mình trước khi bất kỳ tác vụ nào khác có thể bắt đầu. Điều này có thể dẫn đến một số vấn đề cản trở UX:

Hãy xem xét một kịch bản phổ biến: người dùng đang gõ vào thanh tìm kiếm trong khi một danh sách dữ liệu lớn đang được tìm nạp và render ở chế độ nền. Trong mô hình đồng bộ, việc render danh sách có thể chặn trình xử lý đầu vào cho thanh tìm kiếm, làm cho trải nghiệm gõ bị trễ. Tệ hơn nữa, nếu danh sách cực kỳ lớn, toàn bộ ứng dụng có thể có cảm giác bị đóng băng cho đến khi quá trình rendering hoàn tất.

Giới thiệu Chế độ Đồng thời: Một Sự thay đổi Mô hình

Chế độ Đồng thời không phải là một tính năng mà bạn "bật" theo nghĩa truyền thống; thay vào đó, đó là một chế độ hoạt động mới của React cho phép các tính năng như rendering có thể gián đoạn. Về cốt lõi, tính đồng thời cho phép React quản lý nhiều tác vụ rendering cùng một lúc và gián đoạn, tạm dừng và tiếp tục các tác vụ này khi cần thiết. Điều này đạt được thông qua một bộ lập lịch tinh vi ưu tiên các cập nhật dựa trên mức độ khẩn cấp và tầm quan trọng của chúng.

Hãy nghĩ lại về phép ẩn dụ đường cao tốc của chúng ta, nhưng lần này có nhiều làn đường và quản lý giao thông. Chế độ Đồng thời giới thiệu một bộ điều khiển giao thông thông minh có thể:

Sự thay đổi cơ bản này từ xử lý đồng bộ, từng tác vụ một, sang quản lý tác vụ bất đồng bộ, có ưu tiên chính là bản chất của rendering có thể gián đoạn.

Rendering Có thể Gián đoạn là gì?

Rendering có thể gián đoạn là khả năng của React có thể tạm dừng một tác vụ rendering giữa chừng khi đang thực thi và tiếp tục nó sau đó, hoặc từ bỏ một đầu ra đã được render một phần để ưu tiên cho một cập nhật mới hơn, có mức độ ưu tiên cao hơn. Điều này có nghĩa là một hoạt động render kéo dài có thể được chia thành các phần nhỏ hơn, và React có thể chuyển đổi giữa các phần này và các tác vụ khác (như phản hồi đầu vào của người dùng) khi cần thiết.

Các khái niệm chính cho phép rendering có thể gián đoạn bao gồm:

Chính khả năng "gián đoạn" và "tiếp tục" này đã làm cho tính đồng thời của React trở nên mạnh mẽ. Nó đảm bảo rằng UI luôn phản hồi và các tương tác quan trọng của người dùng được xử lý kịp thời, ngay cả khi ứng dụng đang thực hiện các tác vụ rendering phức tạp.

Các Tính năng Chính và Cách chúng Kích hoạt Tính Đồng thời

Chế độ Đồng thời mở khóa một số tính năng mạnh mẽ được xây dựng trên nền tảng của rendering có thể gián đoạn. Hãy cùng khám phá một số tính năng quan trọng nhất:

1. Suspense cho việc Tìm nạp Dữ liệu

Suspense là một cách khai báo để xử lý các hoạt động bất đồng bộ, chẳng hạn như tìm nạp dữ liệu, trong các component React của bạn. Trước đây, việc quản lý các trạng thái tải cho nhiều hoạt động bất đồng bộ có thể trở nên phức tạp và dẫn đến việc render có điều kiện lồng nhau. Suspense đơn giản hóa điều này một cách đáng kể.

Cách hoạt động với tính đồng thời: Khi một component sử dụng Suspense cần tìm nạp dữ liệu, nó sẽ "tạm dừng" việc rendering và hiển thị một UI dự phòng (ví dụ: một vòng xoay tải). Bộ lập lịch của React sau đó có thể tạm dừng việc render của component này mà không chặn phần còn lại của UI. Trong khi đó, nó có thể xử lý các cập nhật khác hoặc tương tác của người dùng. Khi dữ liệu được tìm nạp xong, component có thể tiếp tục render với dữ liệu thực tế. Bản chất có thể gián đoạn này là rất quan trọng; React không bị kẹt khi chờ dữ liệu.

Ví dụ Toàn cầu: Hãy tưởng tượng một nền tảng thương mại điện tử toàn cầu nơi một người dùng ở Tokyo đang xem một trang sản phẩm. Đồng thời, một người dùng ở London đang thêm một mặt hàng vào giỏ hàng của họ, và một người dùng khác ở New York đang tìm kiếm một sản phẩm. Nếu trang sản phẩm ở Tokyo yêu cầu tìm nạp các thông số kỹ thuật chi tiết mất vài giây, Suspense cho phép phần còn lại của ứng dụng (như giỏ hàng ở London hoặc tìm kiếm ở New York) vẫn hoàn toàn phản hồi. React có thể tạm dừng việc render trang sản phẩm ở Tokyo, xử lý cập nhật giỏ hàng ở London và tìm kiếm ở New York, sau đó tiếp tục trang ở Tokyo khi dữ liệu của nó đã sẵn sàng.

Đoạn mã (Minh họa):

// Tưởng tượng một hàm fetchData trả về một Promise
function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: 'Alice' });
    }, 2000);
  });
}

// Một hook tìm nạp dữ liệu giả định có hỗ trợ Suspense
function useUserData() {
  const data = fetch(url);
  if (data.status === 'pending') {
    throw new Promise(resolve => {
      // Đây là thứ mà Suspense sẽ chặn lại
      setTimeout(() => resolve(null), 2000); 
    });
  }
  return data.value;
}

function UserProfile() {
  const userData = useUserData(); // Lệnh gọi này có thể tạm dừng
  return 
Welcome, {userData.name}!
;
}

function App() {
  return (
    Loading user...
}> ); }

2. Gộp Tự động (Automatic Batching)

Batching (Gộp) là quá trình nhóm nhiều cập nhật state vào một lần render lại duy nhất. Theo truyền thống, React chỉ gộp các cập nhật xảy ra trong các trình xử lý sự kiện. Các cập nhật được khởi tạo bên ngoài các trình xử lý sự kiện (ví dụ: trong promises hoặc `setTimeout`) không được gộp, dẫn đến các lần render lại không cần thiết.

Cách hoạt động với tính đồng thời: Với Chế độ Đồng thời, React tự động gộp tất cả các cập nhật state, bất kể chúng bắt nguồn từ đâu. Điều này có nghĩa là nếu bạn có nhiều cập nhật state xảy ra liên tiếp (ví dụ: từ nhiều hoạt động bất đồng bộ hoàn thành), React sẽ nhóm chúng lại và thực hiện một lần render lại duy nhất, cải thiện hiệu suất và giảm chi phí của nhiều chu kỳ rendering.

Ví dụ: Giả sử bạn đang tìm nạp dữ liệu từ hai API khác nhau. Khi cả hai hoàn tất, bạn cập nhật hai phần state riêng biệt. Trong các phiên bản React cũ hơn, điều này có thể kích hoạt hai lần render lại. Trong Chế độ Đồng thời, các cập nhật này được gộp lại, dẫn đến một lần render lại duy nhất, hiệu quả hơn.

3. Chuyển đổi (Transitions)

Transitions (Chuyển đổi) là một khái niệm mới được giới thiệu để phân biệt giữa các cập nhật khẩn cấp và không khẩn cấp. Đây là một cơ chế cốt lõi để kích hoạt rendering có thể gián đoạn.

Cập nhật Khẩn cấp: Đây là những cập nhật đòi hỏi phản hồi ngay lập tức, chẳng hạn như gõ vào trường nhập liệu, nhấp vào nút hoặc thao tác trực tiếp với các phần tử UI. Chúng nên có cảm giác tức thì.

Cập nhật Chuyển đổi: Đây là những cập nhật có thể mất nhiều thời gian hơn và không yêu cầu phản hồi ngay lập tức. Các ví dụ bao gồm render một trang mới sau khi nhấp vào một liên kết, lọc một danh sách lớn hoặc cập nhật các phần tử UI liên quan không phản hồi trực tiếp với một cú nhấp chuột. Những cập nhật này có thể bị gián đoạn.

Cách hoạt động với tính đồng thời: Sử dụng API `startTransition`, bạn có thể đánh dấu các cập nhật state nhất định là transition. Bộ lập lịch của React sau đó sẽ xử lý các cập nhật này với mức độ ưu tiên thấp hơn và có thể gián đoạn chúng nếu một cập nhật khẩn cấp hơn xảy ra. Điều này đảm bảo rằng trong khi một cập nhật không khẩn cấp (như render một danh sách lớn) đang được tiến hành, các cập nhật khẩn cấp (như gõ vào thanh tìm kiếm) được ưu tiên, giữ cho UI luôn phản hồi.

Ví dụ Toàn cầu: Hãy xem xét một trang web đặt vé du lịch. Khi người dùng chọn một điểm đến mới, nó có thể kích hoạt một chuỗi các cập nhật: tìm nạp dữ liệu chuyến bay, cập nhật tình trạng phòng khách sạn và render bản đồ. Nếu người dùng ngay lập tức quyết định thay đổi ngày đi trong khi các cập nhật ban đầu vẫn đang được xử lý, API `startTransition` cho phép React tạm dừng các cập nhật chuyến bay/khách sạn, xử lý thay đổi ngày khẩn cấp, và sau đó có thể tiếp tục hoặc khởi động lại việc tìm nạp chuyến bay/khách sạn dựa trên ngày mới. Điều này ngăn UI bị đóng băng trong chuỗi cập nhật phức tạp.

Đoạn mã (Minh họa):

import { useState, useTransition } from 'react';

function SearchResults() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleQueryChange = (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);

    // Đánh dấu cập nhật này là một transition
    startTransition(() => {
      // Mô phỏng việc tìm nạp kết quả, quá trình này có thể bị gián đoạn
      fetchResults(newQuery).then(res => setResults(res));
    });
  };

  return (
    

      
      {isPending && 
Loading results...
}
      
    
        {results.map(item => (
          
  • {item.name}
    • 
        ))}
      

    

  );
}

4. Tích hợp Thư viện và Hệ sinh thái

Lợi ích của Chế độ Đồng thời không chỉ giới hạn ở các tính năng cốt lõi của React. Toàn bộ hệ sinh thái đang thích ứng. Các thư viện tương tác với React, chẳng hạn như các giải pháp định tuyến hoặc công cụ quản lý state, cũng có thể tận dụng tính đồng thời để cung cấp trải nghiệm mượt mà hơn.

Ví dụ: Một thư viện định tuyến có thể sử dụng transitions để điều hướng giữa các trang. Nếu người dùng điều hướng đi trước khi trang hiện tại đã render hoàn toàn, cập nhật định tuyến có thể được gián đoạn hoặc hủy bỏ một cách liền mạch, và điều hướng mới có thể được ưu tiên. Điều này đảm bảo rằng người dùng luôn thấy chế độ xem cập nhật nhất mà họ dự định.

Cách Kích hoạt và Sử dụng các Tính năng Đồng thời

Mặc dù Chế độ Đồng thời là một sự thay đổi nền tảng, việc kích hoạt các tính năng của nó thường khá đơn giản và thường chỉ yêu cầu thay đổi mã tối thiểu, đặc biệt đối với các ứng dụng mới hoặc khi áp dụng các tính năng như Suspense và Transitions.

1. Phiên bản React

Các tính năng đồng thời có sẵn trong React 18 trở lên. Hãy chắc chắn rằng bạn đang sử dụng một phiên bản tương thích:

npm install react@latest react-dom@latest

2. Root API (`createRoot`)

Cách chính để chọn tham gia các tính năng đồng thời là sử dụng API `createRoot` mới khi gắn kết ứng dụng của bạn:

// index.js hoặc main.jsx
import ReactDOM from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render();

Việc sử dụng `createRoot` sẽ tự động kích hoạt tất cả các tính năng đồng thời, bao gồm gộp tự động, transitions và Suspense.

Lưu ý: API `ReactDOM.render` cũ không hỗ trợ các tính năng đồng thời. Việc chuyển sang `createRoot` là một bước quan trọng để mở khóa tính đồng thời.

3. Triển khai Suspense

Như đã trình bày trước đó, Suspense được triển khai bằng cách bao bọc các component thực hiện các hoạt động bất đồng bộ bằng một ranh giới <Suspense> và cung cấp một prop fallback.

Các Thực hành Tốt nhất:

4. Sử dụng Transitions (`startTransition`)

Xác định các cập nhật UI không khẩn cấp và bao bọc chúng bằng startTransition.

Khi nào nên sử dụng:

Ví dụ: Đối với việc lọc phức tạp một bộ dữ liệu lớn được hiển thị trong bảng, bạn sẽ đặt trạng thái truy vấn bộ lọc và sau đó gọi startTransition cho việc lọc thực tế và render lại các hàng của bảng. Điều này đảm bảo rằng nếu người dùng nhanh chóng thay đổi lại tiêu chí lọc, hoạt động lọc trước đó có thể được gián đoạn một cách an toàn.

Lợi ích của Rendering Có thể Gián đoạn đối với Khán giả Toàn cầu

Những lợi thế của rendering có thể gián đoạn và Chế độ Đồng thời được khuếch đại khi xem xét một cơ sở người dùng toàn cầu với các điều kiện mạng và khả năng thiết bị đa dạng.

Hãy xem xét một ứng dụng học ngôn ngữ được sử dụng bởi học sinh trên toàn thế giới. Nếu một học sinh đang tải xuống một bài học mới (một tác vụ có thể kéo dài) trong khi một học sinh khác đang cố gắng trả lời một câu hỏi từ vựng nhanh, rendering có thể gián đoạn đảm bảo rằng câu hỏi từ vựng được trả lời ngay lập tức, ngay cả khi quá trình tải xuống đang diễn ra. Điều này rất quan trọng đối với các công cụ giáo dục nơi phản hồi ngay lập tức là rất quan trọng cho việc học.

Những Thách thức và Cân nhắc Tiềm tàng

Mặc dù Chế độ Đồng thời mang lại những lợi thế đáng kể, việc áp dụng nó cũng đòi hỏi một quá trình học hỏi và một số cân nhắc:

Tương lai của Tính Đồng thời trong React

Hành trình của React vào lĩnh vực đồng thời vẫn đang tiếp diễn. Đội ngũ tiếp tục tinh chỉnh bộ lập lịch, giới thiệu các API mới và cải thiện trải nghiệm của nhà phát triển. Các tính năng như Offscreen API (cho phép các component được render mà không ảnh hưởng đến UI mà người dùng cảm nhận, hữu ích cho việc tiền render hoặc các tác vụ nền) đang tiếp tục mở rộng các khả năng có thể đạt được với rendering đồng thời.

Khi web ngày càng trở nên phức tạp và kỳ vọng của người dùng về hiệu suất và độ phản hồi tiếp tục tăng, rendering đồng thời đang trở thành không chỉ là một sự tối ưu hóa mà còn là một sự cần thiết để xây dựng các ứng dụng hiện đại, hấp dẫn phục vụ cho khán giả toàn cầu.

Kết luận

Chế độ Đồng thời của React và khái niệm cốt lõi của nó về rendering có thể gián đoạn đại diện cho một sự tiến hóa đáng kể trong cách chúng ta xây dựng giao diện người dùng. Bằng cách cho phép React tạm dừng, tiếp tục và ưu tiên các tác vụ rendering, chúng ta có thể tạo ra các ứng dụng không chỉ có hiệu suất cao mà còn vô cùng phản hồi và kiên cường, ngay cả dưới tải nặng hoặc trong các môi trường hạn chế.

Đối với khán giả toàn cầu, điều này mang lại một trải nghiệm người dùng công bằng và thú vị hơn. Cho dù người dùng của bạn đang truy cập ứng dụng từ một kết nối cáp quang tốc độ cao ở Châu Âu hay một mạng di động ở một quốc gia đang phát triển, Chế độ Đồng thời giúp đảm bảo rằng ứng dụng của bạn luôn có cảm giác nhanh và mượt mà.

Việc áp dụng các tính năng như Suspense và Transitions, và chuyển sang Root API mới, là những bước quan trọng để mở khóa toàn bộ tiềm năng của React. Bằng cách hiểu và áp dụng những khái niệm này, bạn có thể xây dựng thế hệ tiếp theo của các ứng dụng web thực sự làm hài lòng người dùng trên toàn thế giới.

Những điểm Chính cần Ghi nhớ:

Hãy bắt đầu khám phá Chế độ Đồng thời trong các dự án của bạn ngay hôm nay và xây dựng các ứng dụng nhanh hơn, phản hồi tốt hơn và thú vị hơn cho mọi người.