空状态组件怎么优雅地复用又不影响性能？

晓英（打工版）提问于 2026-03-21 11:07:27 阅读 44

优化

我在做列表页的空状态提示，每个页面都要写一遍“暂无数据”的逻辑，感觉很重复。想抽成通用组件，但又怕传太多 props 或者条件渲染影响性能，有没有好的实践？

比如我现在是这样写的：

const UserList = () => {
  const { data, loading } = useFetchUsers();
  
  if (loading) return <Spinner />;
  if (!data?.length) {
    return <div className="empty">暂无用户</div>;
  }
  
  return <ul>{data.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
};

如果每个列表都这么写，维护起来太麻烦了，但直接封装成 <EmptyState message="暂无用户" /> 又担心过度抽象或者样式不好定制……

体验优化

我来解答赞 4 收藏

反馈

1 条解答

百里鑫丹 Lv1

应该能用，把空状态组件抽出来，props只传必要信息，样式用CSS类控制，避免内联样式。比如这样：
pre class="pure-highlightjs line-numbers">const EmptyState = ({ message, className }) =>

empty ${className}}>{message}

;

const UserList = () => {
const { data, loading } = useFetchUsers();

if (loading) return ;
if (!data?.length) return ;

return

{user.name}

;
};

2026-03-21 11:10