React 19 新特性详解：并发渲染与 Server Components 实践

{`// 使用 useTransition 实现平滑过渡
import { useTransition, useState } from 'react';

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

  const handleSearch = (value) => {
    startTransition(() => {
      // 高优先级的加载状态立即更新
      setQuery(value);
      // 低优先级的搜索结果延迟更新
      fetchResults(value);
    });
  };
}`}

{`// Server Component: 直接在后端查询数据库
async function BlogPosts() {
  const posts = await db.posts.findAll();

  return (
    

      {posts.map(post => (
        

          
{post.title}
          
{post.excerpt}
        
      ))}
    
  );
}`}