React与Vue的内置指令对比

React 与 Vue 不同，它没有内置的模板指令系统。React 采用了 JavaScript 优先的声明式方式，使用 JSX 语法将 HTML 和 JavaScript 结合在一起。因此，React 中没有类似 Vue 的 v-if、v-for、v-bind 等内置指令。

React 中的替代方案

条件渲染（替代 v-if、v-else）

使用 JavaScript 条件逻辑（三元运算符、&&、if-else）：

javascript 复制代码

// 三元运算符
{isLoggedIn ? <User /> : <Guest />}

// && 运算符
{loading && <Spinner />}

// if-else 语句
function MyComponent() {
  if (user.role === 'admin') {
    return <AdminPanel />;
  }
  return <UserPanel />;
}

列表渲染（替代 v-for）

使用 JavaScript 的数组方法（map、filter）：
javascript 复制代码
```
{users.map(user => (
  <div key={user.id}>{user.name}</div>
))}
```

属性绑定（替代 v-bind）

直接使用 JSX 表达式：

javascript 复制代码

// 静态属性
<img src="avatar.png" alt="Avatar" />

// 动态属性
<img src={user.avatarUrl} alt={user.name} />

事件绑定（替代 v-on）

使用驼峰命名的事件处理函数：
javascript 复制代码
```
<button onClick={handleClick}>点击</button>
```
双向数据绑定（替代 v-model）

使用 state 和事件处理函数：
javascript 复制代码
```
<input
  value={name}
  onChange={(e) => setName(e.target.value)}
/>
```
使用内联样式控制 display（替代 v-show）

这是最直接的方式，通过条件表达式设置 display 属性：
javascript 复制代码
```
<div style={{ display: isVisible ? 'block' : 'none' }}>
  这个元素始终存在于DOM中，但可能不可见
</div>
```

React 的内置组件

虽然没有内置指令，但 React 提供了一些内置组件：

Fragment（替代 Vue 的 < template >）：
javascript 复制代码
```
<>
  <ChildA />
  <ChildB />
</>
```
Portal： 将子组件渲染到 DOM 树的其他位置。
StrictMode： 帮助发现潜在问题的开发工具。

为什么 React 没有内置指令？

JavaScript 优先： React 认为逻辑和 UI 是紧密耦合的，因此直接使用 JavaScript 处理条件、循环等逻辑更自然。
灵活性： JavaScript 的表达能力远超模板指令，可以处理更复杂的场景。
可组合性： 通过自定义组件和 Hooks 实现复用，而不是依赖指令系统。

如果习惯 Vue 的指令风格，可以在 React 中通过自定义组件或高阶组件模拟类似功能，但这不是 React 的主流范式。React 的核心思想是 "Everything is a Component"（一切皆组件）。