当前位置：首页 > article >正文

【React】如何高效使用条件渲染

article 2025/1/7 22:32:12

作为一名 React 开发者，我们都经历过这样的时刻：盯着 JSX 代码，纠结于条件渲染，内心涌起一丝挫败感。让我们先看看一些常见的代码片段：

{isVisible && ( <> <Header /> <Content /> </> )} 
{ isLoggedIn ? <UserDashboard /> : <LoginForm /> }

没错，这些代码确实能跑起来，但代价是什么呢？🤔

过多的括号和嵌套让代码难以阅读。
嵌套的条件判断？那简直是混乱的开始。
这样的代码既不优雅，也不直观。

虽然这不是什么致命问题，但它就像鞋里的一粒小石子——虽然小，但时间久了真的会让人抓狂。😫

灵感来源：Solid.js 的优雅解决方案 💡

这时，Solid.js 进入了我的视野。这个框架以其创新的设计思路吸引了众多开发者的目光。其中一个让我眼前一亮的特性，就是它处理条件渲染的优雅方式。

解决方案：引入 Show 组件 🎉

受到 Solid.js 的启发，我决定创建一个 Show 组件，来简化我们的条件渲染逻辑：

interface ShowProps<T> {
	when: T | undefined | null | false; 
	fallback?: React.ReactNode; 
	children: React.ReactNode | ((item: T) => React.ReactNode); 
} 
	
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>