這個(gè)簡單的竅門能大大改善 React 開發(fā)體驗(yàn)

作者：dev 2024-11-07 08:31:16

從開發(fā)的角度來看，這似乎不是一個(gè)主要的痛點(diǎn)，但它更像是一種沉悶而持久的煩惱。它常常讓我感到沮喪，尤其是當(dāng)代碼結(jié)構(gòu)變得復(fù)雜時(shí)--三元運(yùn)算讓我的代碼看起來很難看，也更難理解。

問題背景

作為一名 React 開發(fā)者，在 JSX 中編寫條件渲染時(shí)總會(huì)遇到一些煩惱。看看這些常見的代碼：

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

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

這種寫法雖然能用，但存在以下問題：

大量的花括號(hào)和括號(hào)使代碼難以閱讀
嵌套條件時(shí)結(jié)構(gòu)更加混亂
代碼不夠優(yōu)雅直觀

從開發(fā)的角度來看，這似乎不是一個(gè)主要的痛點(diǎn)，但它更像是一種沉悶而持久的煩惱??。它常常讓我感到沮喪，尤其是當(dāng)代碼結(jié)構(gòu)變得復(fù)雜時(shí)--三元運(yùn)算讓我的代碼看起來很難看，也更難理解??。

靈感來源：Solid.js 的優(yōu)雅方案

從 Solid.js 框架獲得靈感，可以創(chuàng)建一個(gè) Show 組件來優(yōu)化條件渲染的寫法：

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

實(shí)現(xiàn)方案

創(chuàng)建一個(gè)簡單但強(qiáng)大的 Show 組件：

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

使用示例

1. 基礎(chǔ)條件渲染

// ? 舊寫法
{isLoading && <Spinner />}

// ? 新寫法
<Show when={isLoading}>
  <Spinner />
</Show>

2. 條件分支渲染

// ? 舊寫法
{isAdmin 
  ? <AdminPanel /> 
  : <UserPanel />
}

// ? 新寫法
<Show 
  when={isAdmin}
  fallback={<UserPanel />}
>
  <AdminPanel />
</Show>

3. 復(fù)雜條件渲染

// ? 舊寫法
{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. 帶數(shù)據(jù)處理的條件渲染

// ? 舊寫法
{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>

擴(kuò)展功能

還可以添加一些實(shí)用的功能：

// 支持異步數(shù)據(jù)
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>

這個(gè)簡單的組件不僅能讓代碼更加清晰易讀，還能提升開發(fā)效率。有時(shí)候最簡單的改進(jìn)反而能帶來最大的收益！

責(zé)任編輯：武曉燕來源：大遷世界

React 開發(fā)運(yùn)算