React 并发特性实战指南

react 的并发特性让应用更加流畅和响应迅速。这些特性包括 useTransition、useDeferredValue、Suspense 和 useoptimistic。它们协同工作，能够显著提升用户体验。下面通过实际示例和最佳实践来了解这些功能。

理解并发渲染

并发渲染是 React 其他并发特性的基础。在并发渲染之前，React 采用同步更新方式。当触发更新时，React 会阻塞主线程，直到整个组件树重新渲染完成。这可能导致界面卡顿，特别是在处理复杂组件时，用户输入会变得迟钝。

并发渲染引入了可中断的渲染机制。React 可以开始渲染更新，然后暂停去处理更紧急的任务（比如用户输入），之后再从中断的地方继续渲染。这样就不会阻塞用户操作。

useTransition：管理任务优先级

useTransition 可以将状态更新标记为非紧急任务，让 React 能够中断这些更新去处理更重要的用户操作。

基本用法

const [isPending, startTransition] = useTransition();

useTransition 不接收参数，返回一个数组。数组包含 isPending（表示是否有过渡任务在进行）和 startTransition（用于标记非紧急更新的函数）。

处理复杂渲染

当有复杂计算可能阻塞用户交互时，可以使用 useTransition 来降低优先级。

标签切换组件示例：

function TabButton({ children, onTabChange }) {
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    startTransition(() => {
      onTabChange();
    });
  };

  return (
    <button 
      onClick={handleClick}
      style={{ 
        opacity: isPending ? 0.6 : 1,
        transition: 'opacity 0.2s'
      }}
    >
      {children}
    </button>
  );
}

处理异步操作

对于 api 调用等异步操作，useTransition 可以协调状态更新，避免界面闪烁。

删除按钮示例：

function DeleteButton({ itemId, onDelete }) {
  const [isPending, startTransition] = useTransition();

  const handleDelete = async () => {
    startTransition(async () => {
      await onDelete(itemId);
    });
  };

  return (
    <button
      onClick={handleDelete}
      disabled={isPending}
      style={{ 
        opacity: isPending ? 0.6 : 1 
      }}
    >
      {isPending ? '删除中...' : '删除'}
    </button>
  );
}

使用异步函数时，isPending 状态会自动管理，不需要手动设置加载状态。

Suspense：声明式加载

Suspense 提供了声明式的加载边界，可以与 React.lazy 配合实现代码分割，也可以用于异步数据加载。

基本用法

<Suspense fallback={<LoadingComponent />}>
  <AsyncComponent />
</Suspense>

Suspense 接收 fallback 属性（加载期间显示的组件）和可能异步加载的子组件。

代码分割

配合 React.lazy 实现组件级代码分割：

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

异步数据加载

为不同数据源设置独立的 Suspense 边界：

function UserDashboard({ userId }) {
  return (
    <div>
      <h1>用户面板</h1>
      <Suspense fallback={<div>加载用户信息...</div>}>
        <UserProfile userId={userId} />
      </Suspense>
      <Suspense fallback={<div>加载文章列表...</div>}>
        <UserPosts userId={userId} />
      </Suspense>
    </div>
  );
}

每个组件管理自己的数据，父组件通过 Suspense 统一处理加载状态。

结合 useTransition

将 useTransition 与 Suspense 结合，可以在导航时避免突兀的加载状态。

路由组件示例：

function AppRouter() {
  const [currentPage, setCurrentPage] = useState('home');
  const [isPending, startTransition] = useTransition();

  function navigate(page) {
    startTransition(() => {
      setCurrentPage(page);
    });
  }

  return (
    <div>
      <nav>
        <button onClick={() => navigate('home')}>首页</button>
        <button onClick={() => navigate('profile')}>个人资料</button>
        <button onClick={() => navigate('settings')}>设置</button>
      </nav>
      <Suspense fallback={<div>页面加载中...</div>}>
        <div style={{ 
          opacity: isPending ? 0.7 : 1,
          transition: 'opacity 0.2s'
        }}>
          <PageContent page={currentPage} />
        </div>
      </Suspense>
    </div>
  );
}

在 Next.js App Router 中，导航会自动使用 useTransition。需要注意的是，useTransition 只会等待足够长的时间来避免隐藏已显示的内容，不会等待所有嵌套的 Suspense 边界。

use：读取 Promise 和 Context

use API 可以读取 Promise 和 Context 值，与 Suspense 配合良好。与 Hooks 不同，use 可以在条件语句中调用。

基本用法

const data = use(promise);
const contextValue = use(Context);

use 接收 Promise 或 Context，返回解析后的值。对于 Promise，会暂停组件直到解析完成。

完整示例

function App() {
  const userPromise = fetchUser('/api/user/123');

  return (
    <Suspense fallback={<div>加载用户信息...</div>}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

function UserProfile({ userPromise }) {
  const user = use(userPromise);
  
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
    </div>
  );
}

use 会暂停 UserProfile 组件直到 Promise 解析完成，Suspense 在加载期间显示回退内容。

useDeferredValue：延迟更新

useDeferredValue 可以延迟更新依赖于频繁变化值的 UI 部分，在当前内容可见的同时准备新内容。

基本用法

const deferredValue = useDeferredValue(value);

useDeferredValue 接收一个值，返回一个延迟版本，在快速更新期间会暂时保持旧值。

处理复杂渲染

当用户输入触发复杂计算时，使用 useDeferredValue 保持输入响应性：

function FilteredList({ items }) {
  const [filter, setFilter] = useState('');
  const deferredFilter = useDeferredValue(filter);

  return (
    <div>
      <input 
        value={filter} 
        onChange={(e) => setFilter(e.target.value)}
        placeholder="搜索..."
      />
      <ExpensiveFilteredItems 
        items={items} 
        filter={deferredFilter} 
      />
    </div>
  );
}

const ExpensiveFilteredItems = React.memo(function ({ items, filter }) {
  const filteredItems = items.filter(item =>
    item.name.toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <div>
      {filteredItems.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
});

使用 React.memo 包装复杂组件，确保只在 props 实际变化时重新渲染。

异步搜索

结合 useDeferredValue 和 Suspense 实现搜索功能：

function SearchApp() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  const isStale = query !== deferredQuery;

  return (
    <div>
      <input 
        value={query} 
        onChange={(e) => setQuery(e.target.value)}
        placeholder="搜索用户..."
      />
      <div style={{ 
        opacity: isStale ? 0.6 : 1,
        transition: 'opacity 0.2s'
      }}>
        <Suspense fallback={<div>搜索中...</div>}>
          <SearchResults query={deferredQuery} />
        </Suspense>
      </div>
    </div>
  );
}

function SearchResults({ query }) {
  if (!query) {
    return <div>请输入搜索关键词</div>;
  }

  const results = use(searchUsers(query));
  
  return (
    <div>
      {results.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
}

通过比较当前查询词和延迟版本，使用透明度变化提示用户搜索结果正在更新。

useOptimistic：乐观更新

useOptimistic 可以立即显示预期更新，而实际更新在后台进行。必须在 useTransition 中使用。

基本用法

const [optimisticState, addOptimistic] = useOptimistic(
  currentState,
  updateFunction
);

接收当前状态和更新函数，返回乐观状态和触发乐观更新的函数。

实时交互

点赞按钮的乐观更新示例：

function LikeButton({ post, onToggleLike }) {
  const [, startTransition] = useTransition();
  const [optimisticPost, setOptimisticPost] = useOptimistic(
    post,
    (currentPost, shouldLike) => ({
      ...currentPost,
      liked: shouldLike,
      likes: currentPost.likes + (shouldLike ? 1 : -1)
    })
  );

  const handleClick = () => {
    startTransition(async () => {
      setOptimisticPost(!optimisticPost.liked);
      await onToggleLike(post.id, !optimisticPost.liked);
    });
  };

  return (
    <button onClick={handleClick}>
      {optimisticPost.liked ? '是' : '否'} {optimisticPost.likes}
    </button>
  );
}

点击时图标和计数立即变化，不需要额外的加载状态。

表单提交

评论表单的乐观更新：

function CommentForm({ comments, onSubmit }) {
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (currentComments, newComment) => [
      ...currentComments,
      { ...newComment, isSubmitting: true }
    ]
  );
  
  const formRef = useRef();

  const handleSubmit = async (formData) => {
    const commentText = formData.get('comment');
    
    addOptimisticComment({
      id: Date.now(),
      text: commentText
    });

    await onSubmit(commentText);
    formRef.current?.reset();
  };

  return (
    <div>
      <form ref={formRef} action={handleSubmit}>
        <textarea name="comment" required />
        <button type="submit">发布评论</button>
      </form>
      
      <div>
        {optimisticComments.map(comment => (
          <div 
            key={comment.id}
            style={{ 
              opacity: comment.isSubmitting ? 0.7 : 1 
            }}
          >
            {comment.text}
            {comment.isSubmitting && ' (发布中...)'}
          </div>
        ))}
      </div>
    </div>
  );
}

提交表单时评论立即显示，带有发布中状态。请求完成后，乐观评论会被真实数据替换。如果请求失败，useOptimistic 会自动回滚。

总结

React 的并发特性共同构建了更流畅的用户体验：

useTransition：创建低优先级的状态更新，在处理复杂任务和异步操作时保持界面响应
useDeferredValue：延迟渲染依赖频繁变化值的 UI 部分，防止界面卡顿
Suspense：为代码分割和异步操作提供声明式加载边界
useOptimistic：通过乐观更新让用户交互感觉更加即时

合理运用这些特性，可以显著提升 React 应用的性能和用户体验。在实际开发中，建议根据具体场景选择合适的并发特性，避免过度使用。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13132