这个简单的窍门能大大改善 React 开发体验

文化   2024-11-07 08:31   中国香港  

问题背景

作为一名 React 开发者,在 JSX 中编写条件渲染时总会遇到一些烦恼。看看这些常见的代码:

{isVisible && (
  <>
    <Header />
    <Content />
  </>

)}

{
  isLoggedIn 
  ? <UserDashboard /> 
  : <LoginForm />
}

这种写法虽然能用,但存在以下问题:

  • 大量的花括号和括号使代码难以阅读
  • 嵌套条件时结构更加混乱
  • 代码不够优雅直观

从开发的角度来看,这似乎不是一个主要的痛点,但它更像是一种沉闷而持久的烦恼😖。它常常让我感到沮丧,尤其是当代码结构变得复杂时--三元运算让我的代码看起来很难看,也更难理解🤯。

灵感来源:Solid.js 的优雅方案

从 Solid.js 框架获得灵感,可以创建一个 Show 组件来优化条件渲染的写法:

// Show 组件类型定义
interface ShowProps<T> {
  when: T | undefined | null | false;
  fallback?: React.ReactNode;
  children: React.ReactNode | ((item: T) => React.ReactNode);
}

实现方案

创建一个简单但强大的 Show 组件:

function Show({ when, fallback = null, children }{
  return when ? children : fallback;
}

使用示例

1. 基础条件渲染

// ❌ 旧写法
{isLoading && <Spinner />}

// ✅ 新写法
<Show when={isLoading}>
  <Spinner />
</Show>

2. 条件分支渲染

// ❌ 旧写法
{isAdmin 
  ? <AdminPanel /> 
  : <UserPanel />
}

// ✅ 新写法
<Show 
  when={isAdmin}
  fallback={<UserPanel />}
>
  <AdminPanel />
</Show>

3. 复杂条件渲染

// ❌ 旧写法
{isCommentsEnabled && (
  <>
    <CommentsHeader />
    {comments.map(comment => (
      <CommentItem key={comment.id} {...comment} />
    ))}
    {isLoggedIn && <CommentForm />}
  </>

)}

// ✅ 新写法
<Show when={isCommentsEnabled}>
  <CommentsHeader />
  {comments.map(comment => (
    <CommentItem key={comment.id} {...comment} />
  ))}
  <Show when={isLoggedIn}>
    <CommentForm />
  </Show>
</
Show>

4. 带数据处理的条件渲染

// ❌ 旧写法
{user && (
  <div>
    Welcome, {user.name}!
    {user.isAdmin && <AdminBadge />}
  </div>

)}

// ✅ 新写法
<Show when={user}>
  {(userData) => (
    <div>
      Welcome, {userData.name}!
      <Show when={userData.isAdmin}>
        <AdminBadge />
      </Show>
    </div>

  )}
</Show>

扩展功能

还可以添加一些实用的功能:

// 支持异步数据
const AsyncShow = ({ when, fallback, children }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    Promise.resolve(when).then(result => {
      setData(result);
      setIsLoading(false);
    });
  }, [when]);

  if (isLoading) return fallback;
  return data ? children : null;
};

// 使用示例
<AsyncShow 
  when={fetchUserData()} 
  fallback={<Loading />
}
>
  {user => <UserProfile data={user} />}
</AsyncShow>

这个简单的组件不仅能让代码更加清晰易读,还能提升开发效率。有时候最简单的改进反而能带来最大的收益!🎉



最后:
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
VueUse源码解读


大迁世界
掘金LV8,思否10万+的作者。一个热爱前端的创业者。
 最新文章