這個簡單的竅門能大大改善 React 開發(fā)體驗
作者：dev
從開發(fā)的角度來看，這似乎不是一個主要的痛點，但它更像是一種沉悶而持久的煩惱。它常常讓我感到沮喪，尤其是當(dāng)代碼結(jié)構(gòu)變得復(fù)雜時--三元運算讓我的代碼看起來很難看，也更難理解。
問題背景
作為一名 React 開發(fā)者，在 JSX 中編寫條件渲染時總會遇到一些煩惱?？纯催@些常見的代碼：
{isVisible && (
<>
<Header />
<Content />
</>
)}
{
isLoggedIn
? <UserDashboard />
: <LoginForm />
}這種寫法雖然能用，但存在以下問題：
- 大量的花括號和括號使代碼難以閱讀
- 嵌套條件時結(jié)構(gòu)更加混亂
- 代碼不夠優(yōu)雅直觀
從開發(fā)的角度來看，這似乎不是一個主要的痛點，但它更像是一種沉悶而持久的煩惱??。它常常讓我感到沮喪，尤其是當(dāng)代碼結(jié)構(gòu)變得復(fù)雜時--三元運算讓我的代碼看起來很難看，也更難理解??。
靈感來源：Solid.js 的優(yōu)雅方案
從 Solid.js 框架獲得靈感，可以創(chuàng)建一個 Show 組件來優(yōu)化條件渲染的寫法：
// Show 組件類型定義
interface ShowProps<T> {
when: T | undefined | null | false;
fallback?: React.ReactNode;
children: React.ReactNode | ((item: T) => React.ReactNode);
}實現(xiàn)方案
創(chuà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>擴展功能
還可以添加一些實用的功能：
// 支持異步數(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>這個簡單的組件不僅能讓代碼更加清晰易讀，還能提升開發(fā)效率。有時候最簡單的改進反而能帶來最大的收益！
責(zé)任編輯：武曉燕
來源：
大遷世界
