指令是为应用中的元素添加额外行为的类。在原生的 HTML 中并没指令的概念，为了更好的说明指令的功能，下面我们来先看一段使用在原生 HTML 中实现的类似于指令的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Directive Example</title>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<div data-show-if="isVisible">这个元素根据 isVisible 的值显示或隐藏</div>
<button onclick="toggleVisibility()">切换显示</button>
<script>
let isVisible = true;
function toggleVisibility() {
isVisible = !isVisible;
document.querySelectorAll('[data-show-if]').forEach(el => {
el.style.display = isVisible ? '' : 'none';
});
}
// 初始化显示状态
toggleVisibility();
</script>
</body>
</html>
在这个例子中，data-show-if 属性和 JavaScript 函数 toggleVisibility 实现了类似于 Angular 中 ngIf 指令和 Vue 中 v-if 指令的功能。
在三大框架中 React 没有指令的概念，主要是因为它采用了不同的设计哲学和架构。React 的核心思想是通过组件来构建用户界面，而不是通过指令来操作 DOM。在接下来的比较中，我们会列出 React中实现相应指令功能的代码。
下面我们介绍一下三大框架中的 if 指令。
Angular
通过在宿主元素上应用 NgIf 指令来添加或移除元素。
<div *ngIf="currentCustomer">Hello, {{currentCustomer.name}}</div>React
在组件中使用 if 条件来添加或移除元素。
// 条件渲染
if (isPacked) {
return null;
}
return <li className="item">{name}</li>;Vue
通过使用 v-if 指令来添加或移除元素。
<h1 v-if="awesome">Vue is awesome!</h1>小结
在三大框架中，指令用来控制元素样式及用户所见内容，它是除了组件、模板之外另一个比较重要的模块。
在接下来的章节中，我们将对指令的三个主题进行比较，它们分别是：
- 属性型指令
- 结构型指令
- 自定义指令
文章参考链接：
发表回复