Menyelam Lebih Dalam Ciri dan Penambahbaikan Terkini

React 19: Menyelam Lebih Dalam tentang Ciri dan Penambahbaikan Terkini

pengenalan

React 19 membawakan beberapa ciri terobosan dan penambahbaikan kepada perpustakaan bahagian hadapan yang popular. Dalam panduan komprehensif ini, kami akan meneroka perubahan utama dan cara ia boleh meningkatkan aplikasi React anda.

1. Tindakan dan Gunakan Keadaan Optimis

Tindakan

Tindakan menyediakan cara baharu untuk mengendalikan penyerahan borang dan mutasi data:

import { useAction } from 'react';

function TodoForm() {
  const addTodo = useAction(async (formData: FormData) => {
    const title = formData.get('title');
    await saveTodoToDatabase({ title });
  });

  return (
    

Add Todo

); }

Kemas Kini Optimis

Ciri keadaan optimis baharu membolehkan UX yang lebih baik dengan maklum balas segera:

import { useOptimistic, useAction } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );

  const addTodo = useAction(async (formData: FormData) => {
    const title = formData.get('title');
    const newTodo = { id: Date.now(), title };

    addOptimisticTodo(newTodo);
    await saveTodoToDatabase(newTodo);
  });

  return (
    <div>
      <form action="%7BaddTodo%7D">
        <input name="title">
        <button type="submit">Add</button>
      </form>
      <ul>
        {optimisticTodos.map(todo => (
          <li key="{todo.id}">{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}

2. Metadata Dokumen

API Meta Tag Baharu

React 19 memperkenalkan cara baharu untuk mengurus metadata dokumen:

import { Meta, Title } from 'react-meta';

function BlogPost({ post }) {
  return (
    
      <title>{post.title} | My Blog</title>
      <meta name="description" content="{post.excerpt}">
      <meta property="og:title" content="{post.title}">
      <meta property="og:description" content="{post.excerpt}">

      <article>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </article>
    >
  );
}

3. Komponen Pelayan yang Dipertingkatkan

Menstrim dengan Suspense

Keupayaan penstriman yang lebih baik dengan penyepaduan Suspense yang lebih baik:

import { Suspense } from 'react';

function AsyncUserProfile({ userId }) {
  return (
    <suspense fallback="{<LoadingSpinner"></suspense>}>
      <userdata userid="{userId}"></userdata>
      <suspense fallback="{<PostsPlaceholder"></suspense>}>
        <userposts userid="{userId}"></userposts>
      
      <suspense fallback="{<ActivityPlaceholder"></suspense>}>
        <useractivity userid="{userId}"></useractivity>
      
    
  );
}

async function UserData({ userId }) {
  const user = await fetchUser(userId);
  return (
    <div classname="profile">
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
    </div>
  );
}

4. Pengoptimuman Pemuatan Aset

Pramuat Aset

API baharu untuk mengoptimumkan pemuatan aset:

import { preloadImage, preloadFont } from 'react';

function App() {
  // Preload critical images
  preloadImage('/hero-image.jpg');

  // Preload fonts
  preloadFont('/fonts/OpenSans-Regular.woff2', {
    as: 'font',
    type: 'font/woff2',
    crossOrigin: 'anonymous',
  });

  return (
    <div>
      <img src="/hero-image.jpg" alt="Menyelam Lebih Dalam Ciri dan Penambahbaikan Terkini">
      <p classname="open-sans">Welcome to our site!</p>
    </div>
  );
}

5. Cangkuk yang Dipertingkatkan

gunakanFormState Hook

Kail baharu untuk menguruskan keadaan borang:

import { useFormState } from 'react';

function LoginForm() {
  const [state, formAction] = useFormState(async (prevState, formData) => {
    const email = formData.get('email');
    const password = formData.get('password');

    try {
      await loginUser(email, password);
      return { success: true };
    } catch (error) {
      return { error: error.message };
    }
  }, { error: null, success: false });

  return (
    

{state.error &&

{state.error}

} {state.success &&

Login successful!

} Login

); }

gunakan Penambahbaikan Peralihan

Pengurusan peralihan yang dipertingkatkan:

import { useTransition, startTransition } from 'react';

function TabPanel({ tabs }) {
  const [isPending, startTransition] = useTransition();
  const [activeTab, setActiveTab] = useState(0);

  const changeTab = (index) => {
    startTransition(() => {
      setActiveTab(index);
    });
  };

  return (
    <div>
      <div classname="tabs">
        {tabs.map((tab, index) => (
          <button key="{index}" onclick="{()"> changeTab(index)}
            className={activeTab === index ? 'active' : ''}
          >
            {tab.label}
          </button>
        ))}
      </div>

      <div classname="content">
        {isPending ? (
          <loadingspinner></loadingspinner>
        ) : (
          <tabcontent data="{tabs[activeTab].content}"></tabcontent>
        )}
      </div>
    </div>
  );
}

6. Peningkatan Prestasi

Batching Automatik

Pengumpulan automatik kemas kini negeri dipertingkatkan:

function UserDashboard() {
  const [profile, setProfile] = useState(null);
  const [posts, setPosts] = useState([]);
  const [notifications, setNotifications] = useState([]);

  const refreshData = async () => {
    // React 19 automatically batches these updates
    // even in async functions
    setProfile(await fetchProfile());
    setPosts(await fetchPosts());
    setNotifications(await fetchNotifications());
  };

  return (
    <div>
      <profile data="{profile}"></profile>
      <posts data="{posts}"></posts>
      <notifications data="{notifications}"></notifications>
    </div>
  );
}

7. Pengendalian Ralat

Sempadan Ralat yang Dipertingkatkan

Keupayaan sempadan ralat dipertingkat:

import { Component, ErrorBoundary } from 'react';

function ErrorFallback({ error, resetError }) {
  return (
    <div classname="error-container">
      <h2>Something went wrong</h2>
      <pre class="brush:php;toolbar:false">{error.message}

Try again