EnlightenCode

React 点赞功能的性能优化实践 ​

在开发 Web 应用时，点赞功能是一个常见的交互场景。本文将分享如何优化 React 中的点赞功能，使其具有更好的用户体验和性能表现。

核心问题 ​

在实现点赞功能时，我们通常会遇到以下几个问题：

  1. 点击响应延迟
  2. 频繁的服务器请求
  3. 状态同步问题
  4. 错误处理和状态回滚

优化方案 ​

1. 即时 UI 反馈 ​

首先，我们采用了"乐观更新"策略，即在用户点击后立即更新 UI 状态：

js
const handleLike = (e) => {
  e.stopPropagation();
  // 未登录处理
  if (!logInfo) {
    setShowLogin(true);
    return;
  }

  // 立即更新UI状态
  const newIsLiked = !isLiked;
  setIsLiked(newIsLiked);
  setLikeCount(newIsLiked ? likeCount + 1 : likeCount - 1);
  // ...
};

2. 防抖处理 ​

为了避免频繁的服务器请求，我们实现了一个 300ms 的防抖：

js
const handleLike = (e) => {
  e.stopPropagation();
  // 未登录处理
  if (!logInfo) {
    setShowLogin(true);
    return;
  }

  // 立即更新UI状态
  const newIsLiked = !isLiked;
  setIsLiked(newIsLiked);
  setLikeCount(newIsLiked ? likeCount + 1 : likeCount - 1);
  // ...

  // 清除之前的定时器
  if (likeTimeoutRef.current) {
    clearTimeout(likeTimeoutRef.current);
  }

  // 设置新的定时器，300ms后发送请求
  likeTimeoutRef.current = setTimeout(() => {
    handleLikeOperation(newIsLiked);
  }, 300);
};

3. 状态追踪与错误处理 ​

我们使用 useRef 来追踪初始状态，便于错误发生时进行回滚：

js
const handleLikeOperation = async (finalState) => {
  // 避免重复请求
  if (finalState === initialLikeStateRef.current) {
    return;
  }

  try {
    setIsLikeLoading(true);
    await storyLikeOperation(option.id, finalState ? 'Like' : 'Delike');
    initialLikeStateRef.current = finalState;
  } catch (error) {
    console.error('点赞操作失败:', error);
    // 错误时回滚状态
    setIsLiked(initialLikeStateRef.current);
    setLikeCount(initialLikeStateRef.current ? likeCount + 1 : likeCount - 1);
  } finally {
    setIsLikeLoading(false);
  }
};

4. 资源清理 ​

确保在组件卸载时清理定时器，防止内存泄漏：

js
useEffect(() => {
  return () => {
    if (likeTimeoutRef.current) {
      clearTimeout(likeTimeoutRef.current);
    }
  };
}, []);

优化效果 ​

通过以上优化，我们实现了：

  1. 即时的用户反馈
  2. 减少不必要的服务器请求
  3. 可靠的错误处理机制
  4. 良好的状态管理

性能建议 ​

  1. 使用 will-change-transform 提示浏览器对动画元素进行优化
  2. 合理使用防抖，避免频繁的状态更新和网络请求
  3. 保持状态同步，做好错误处理
  4. 及时清理副作用，避免内存泄漏

总结 ​

通过合理的状态管理、防抖处理和错误处理机制，我们可以构建出既流畅又可靠的点赞功能。这些优化不仅提升了用户体验，也减少了服务器负载。