React与Vue的内置指令对比

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 和事件处理函数：

   <input
     value={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”（一切皆组件）。