React 與 Vue 不同，它沒有內置的模板指令系統。React 采用了 JavaScript 優先 的聲明式方式，使用 JSX 語法將 HTML 和 JavaScript 結合在一起。因此，React 中沒有類似 Vue 的 v-if、v-for、v-bind 等內置指令。

React 中的替代方案

1. 條件渲染（替代 v-if、v-else）
   使用 JavaScript 條件邏輯（三元運算符、&&、if-else）：

   // 三元運算符
   {isLoggedIn ? <User /> : <Guest />}// && 運算符
   {loading && <Spinner />}// if-else 語句
   function MyComponent() {if (user.role === 'admin') {return <AdminPanel />;}return <UserPanel />;
   }
   

2. 列表渲染（替代 v-for）
   使用 JavaScript 的數組方法（map、filter）：

   {users.map(user => (<div key={user.id}>{user.name}</div>
   ))}
   

3. 屬性綁定（替代 v-bind）
   直接使用 JSX 表達式：

   // 靜態屬性
   <img src="avatar.png" alt="Avatar" />// 動態屬性
   <img src={user.avatarUrl} alt={user.name} />
   

4. 事件綁定（替代 v-on）
   使用駝峰命名的事件處理函數：

   <button onClick={handleClick}>點擊</button>
   

5. 雙向數據綁定（替代 v-model）
   使用 state 和事件處理函數：

   <inputvalue={name}onChange={(e) => setName(e.target.value)}
   />
   

6. 使用內聯樣式控制 display（替代 v-show）
   這是最直接的方式，通過條件表達式設置 display 屬性：

   <div style={{ display: isVisible ? 'block' : 'none' }}>這個元素始終存在于DOM中，但可能不可見
   </div>
   

React 的內置組件

雖然沒有內置指令，但 React 提供了一些內置組件：

• Fragment（替代 Vue 的 < template >）：

  <><ChildA /><ChildB />
  </>
  

• Portal： 將子組件渲染到 DOM 樹的其他位置。

• StrictMode： 幫助發現潛在問題的開發工具。

為什么 React 沒有內置指令？

• JavaScript 優先： React 認為邏輯和 UI 是緊密耦合的，因此直接使用 JavaScript 處理條件、循環等邏輯更自然。
• 靈活性： JavaScript 的表達能力遠超模板指令，可以處理更復雜的場景。
• 可組合性： 通過自定義組件和 Hooks 實現復用，而不是依賴指令系統。

如果習慣 Vue 的指令風格，可以在 React 中通過 自定義組件 或 高階組件 模擬類似功能，但這不是 React 的主流范式。React 的核心思想是 “Everything is a Component”（一切皆組件）。