Giới thiệu

Trong những năm qua, các kỹ sư cấp cao chúng ta đã trở thành kiến trúc sư của hệ sinh thái React. Chúng ta đã xây dựng những thành phần cơ bản, hòa quyện các hook, và kết nối dữ liệu một cách tỉ mỉ với Redux hoặc Context. Chúng ta đã tạo ra những ứng dụng tuyệt vời và hiệu quả, nhưng nếu thành thật mà nói, chúng ta cũng đã viết không ít mã lặp lại. Chúng ta đã tạo ra các hook tùy chỉnh để làm những gì mà có lẽ framework nên thực hiện. Chúng ta đã vá những lỗ hổng giữa thế giới React và thế giới bên ngoài.

React 19 không phải là một cuộc cách mạng; nó là một thời kỳ phục hưng. Đây là framework trưởng thành, nhìn lại những tác phẩm nghệ thuật mà chúng ta đã tạo ra với công cụ của nó và cung cấp cho chúng ta một bộ công cụ tinh tế hơn. Mục tiêu là giảm thiểu ma sát, chấp nhận các mẫu mà chúng ta đã xác lập và tích hợp chúng vào lõi của framework một cách thanh lịch và có ý thức.

Hãy cùng nhau khám phá sâu sắc không chỉ với tư cách là kỹ thuật viên đọc một danh sách thay đổi, mà còn như những nghệ nhân đánh giá một bộ công cụ mới được chế tác tinh xảo.

Hành trình: Từ mã lặp lại đến nghệ thuật khai báo

Hành trình của chúng ta bắt đầu từ một nơi quen thuộc: một thành phần form. Bạn đã biết cảnh tượng đó. Một useState cho dữ liệu đang chờ, một useState cho cờ đang tải, một cái nữa cho đối tượng lỗi, một useEffect hoặc một hàm xử lý sự kiện để kích hoạt việc lấy dữ liệu, và một hàm dọn dẹp để hủy bỏ yêu cầu khi tháo gỡ.

Nó hoạt động. Nó đã được kiểm nghiệm. Nhưng nó thủ công. Đây là mã mà chúng ta đã viết hàng trăm lần. Nó là tiếng ồn che khuất ý định thực sự: "Khi người dùng gửi dữ liệu, hãy gửi dữ liệu này và xử lý phản hồi."

React 19 giới thiệu Actions, một khái niệm định nghĩa lại tương tác này. Đây là framework thừa nhận công việc thường gặp nhất của chúng ta và cung cấp một giải pháp khai báo hàng đầu.

Tác phẩm nghệ thuật: useActionState và useFormStatus

Hãy nghĩ về Actions như một hợp đồng chính thức cho các tác dụng phụ, chủ yếu là các phép biến đổi dữ liệu. Trung tâm của nó là Hook useActionState mới.

// Trước đây: Công việc thủ công quen thuộc của chúng ta
function OldForm() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();
    setIsLoading(true);
    setError(null);
    try {
      const formData = new FormData(event.target);
      const result = await updateUserDetails(formData);
      setData(result);
    } catch (err) {
      setError(err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    // ... JSX với trạng thái tải và thông báo lỗi
  );
}

// Sau: Nghệ thuật của ý định khai báo
import { useActionState } from 'react';

function UserForm() {
  const [state, formAction, isPending] = useActionState(
    async (previousState, formData) => {
      // Đây là hàm hành động của bạn. Mục đích của nó rõ ràng và đơn giản.
      try {
        const result = await updateUserDetails(formData);
        return { success: true, data: result };
      } catch (error) {
        return { success: false, error: error.message };
      }
    },
    null // Trạng thái khởi tạo
  );

  return (
    <form action={formAction}>
      <input name="username" />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Đang cập nhật...' : 'Cập nhật'}
      </button>
      {state?.error && <p>Lỗi: {state.error}</p>}
    </form>
  );
}

Thấy sự thanh lịch chưa? Mã lặp lại biến mất. Trạng thái tải (isPending) được quản lý cho bạn. Mục đích của thành phần trở nên rõ ràng một cách đáng kinh ngạc. Đây là sự kết hợp của ý định, không phải là quản lý trạng thái thủ công.

Để bổ sung cho điều này, useFormStatus cung cấp trạng thái đang chờ cho các thành phần cụ thể sâu bên trong một form, hoàn hảo để vô hiệu hóa một nút con hoặc hiển thị một spinner ngay bên cạnh. Đây không chỉ là API mới; đây là triết lý của trạng thái có thể kết hợp.

Hành trình: Kiểm soát Promise hoang dã

Trong nhiều năm qua, chúng ta đã đối xử với promises như một thứ cần được xử lý bên trong các hook hoặc effects. Chúng sống bên ngoài luồng kết xuất đồng bộ của React, buộc chúng ta phải rải rác các thành phần với && và toán tử ba ngôi cho các trạng thái tải và lỗi.

React 19 giới thiệu hook use, một công cụ mạnh mẽ và tinh tế cảm giác như mở khóa một giác quan mới. use không chỉ là một hook khác; nó là cách React tích hợp sâu sắc với khái niệm Promise.

Tác phẩm nghệ thuật: use(Promise)

Hook use cho phép một thành phần "đọc" giá trị của một Promise trong quá trình kết xuất, như thể nó chỉ là dữ liệu thông thường. Cơ chế Suspense của React xử lý việc chờ bên dưới.

// Trước: Vũ điệu kết xuất điều kiện chuẩn
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId).then(userData => {
      setUser(userData);
      setIsLoading(false);
    });
  }, [userId]);

  if (isLoading) return <p>Đang tải...</p>;
  if (!user) return <p>Không tìm thấy</p>;

  return <h1>{user.name}</h1>;
}

// Sau: Đọc một giá trị, bất kể nguồn gốc của nó
import { use } from 'react';

// Thành phần này phải được gói trong một ranh giới <Suspense>
function UserProfile({ userPromise }) {
  // Thành phần "sử dụng" promise. React xử lý việc giải quyết.
  const user = use(userPromise);

  return <h1>{user.name}</h1>;
}

// Một thành phần cha tạo ra promise và cung cấp ranh giới
function App() {
  return (
    <Suspense fallback={<p>Đang tải tác phẩm nghệ thuật của người dùng...</p>}>
      <UserProfile userPromise={fetchUser(userId)} />
    </Suspense>
  );
}

Đây là một sự thay đổi sâu sắc. Nó làm cho dữ liệu trở thành một hành khách hàng đầu trong mô hình kết xuất của React, bất kể nó đã sẵn sàng bây giờ hay sau này. Nó đơn giản hóa các thành phần của chúng ta và đẩy việc xử lý bất đồng bộ đến các ranh giới, một mẫu mà chúng ta luôn cố gắng đạt được nhưng giờ đây có công cụ nội bộ để thực hiện một cách đơn giản một cách đáng kinh ngạc.

Hành trình: Thống nhất tiêu đề tài liệu

Trong một thời gian dài, việc quản lý các thẻ <title>, <meta>, và <link> đã là một thủ thuật. Chúng ta đã sử dụng các thư viện bên ngoài như react-helmet hoặc viết các script useEffect dễ vỡ trực tiếp thao tác vào document.head, thường dẫn đến tình trạng nhấp nháy hoặc các vấn đề SEO vì thao tác này xảy ra sau lần kết xuất đầu tiên.

React 19 chính thức đưa metadata tài liệu vào cuộc. Đây là framework thừa nhận rằng <head> không phải là một thực thể tách rời mà là một phần cốt lõi của mối quan tâm trong thành phần của chúng ta.

Tác phẩm nghệ thuật: Metadata trong thành phần

Bây giờ bạn có thể đơn giản trả về các thành phần tích hợp như <title>, <meta>, và <link> từ các thành phần của bạn, và React sẽ tự động nâng chúng lên <head> của tài liệu.

// Trước: useEffect dễ vỡ
function BlogPost({ post }) {
  useEffect(() => {
    document.title = post.title;
    const metaDesc = document.querySelector('meta[name="description"]');
    if (metaDesc) {
      metaDesc.setAttribute('content', post.excerpt);
    }
    // Đừng quên dọn dẹp!
    return () => {
      document.title = 'Tiêu đề Mặc định';
    };
  }, [post]);

  return <article>{/* ... */}</article>;
}

// Sau: Khai báo, đồng bộ, và được quản lý bởi React
function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <link rel="canonical" href={post.canonicalUrl} />
      {/* ... nội dung bài viết ... */}
    </article>
  );
}

Điều này không chỉ mang lại sự tiện lợi; nó đảm bảo độ chính xác. Nó đảm bảo metadata của chúng tôi đồng bộ với nội dung từ lần kết xuất đầu tiên, điều này rất quan trọng cho SEO và chia sẻ xã hội. Nó kết hợp một mối quan tâm mà trước đây bị phân tán, làm cho thành phần trở thành một đơn vị tự chứa thực sự của UI và ngữ cảnh.

Cách áp dụng nghệ thuật này: Hướng dẫn thực tiễn cho các kỹ sư cấp cao

Đây không phải là một bản phát hành "viết lại mọi thứ". Đây là một bản phát hành "cải thiện khi bạn đi".

1. Bắt đầu với những thứ dễ dàng: Metadata. Hãy xem xét các thẻ title/meta dựa trên useEffect của bạn. Thay thế chúng bằng các thẻ tích hợp mới là một chiến thắng dễ dàng, an toàn và có tác động lớn. Nó không yêu cầu phải tái cấu trúc trạng thái hay luồng dữ liệu.

2. Tái cấu trúc các form, từng cái một. Xác định một form phức tạp quản lý trạng thái tải và lỗi của riêng nó. Tái cấu trúc nó để sử dụng useActionState. Bạn sẽ ngay lập tức cảm nhận được sự giảm tải về nhận thức. Đây là nơi nghệ thuật sẽ thực sự kết nối với bạn.

3. Thử nghiệm với use ở các ranh giới dữ liệu của bạn. Nếu bạn sử dụng một framework như Next.js hoặc Remix, họ sẽ có khả năng áp dụng mẫu này cho việc lấy dữ liệu. Trong các ứng dụng của riêng bạn, hãy bắt đầu suy nghĩ về các thành phần cha nào có thể tạo ra các promises và truyền chúng xuống cho các thành phần con được gói trong Suspense. Đây là sự thay đổi kiến trúc lớn nhất, vì vậy hãy tiến hành cẩn thận.

4. Chờ đợi hệ sinh thái (một chút). Nhóm React đang làm việc với các nhà quản lý của các thư viện phổ biến như React Query, SWR, và các router để đảm bảo họ hỗ trợ liền mạch API Actions mới. Thư viện lấy dữ liệu mà bạn yêu thích sẽ sớm cung cấp một hàm mà bạn có thể đưa trực tiếp vào useActionState.

Cái chạm cuối trên bức tranh

React 19 là một bức thư tình gửi đến các nhà phát triển cấp cao. Đây là kết quả của việc nhóm React quan sát các mẫu mà chúng ta đã tạo ra trong quá trình sản xuất và tinh tế kết hợp chúng trở lại vào lõi của framework. Nó loại bỏ ma sát mà không hy sinh sức mạnh. Nó cung cấp sự trừu tượng mà không làm mờ ý định.

Không phải là học một ngôn ngữ hoàn toàn mới; mà là cuối cùng có thể nói rõ hơn, cô đọng hơn và nghệ thuật hơn ý định của chúng ta.

Chào mừng bạn đến với giai đoạn tiếp theo của hành trình. Bức tranh của bạn đang chờ đợi.