第七章：不要一上来就上框架岛，有时候一段原生 `<script>` 就够了

很多人学 Astro，第一个错误就是：

text

有一点点交互
就立刻引入 React

其实 Astro 很强调一个朴素判断：

如果只是小交互，先用原生脚本。

例如一个“展开导览说明”按钮：

astro

<button id="guide-toggle" aria-expanded="false">
  展开导览说明
</button>

<div id="guide-panel" hidden>
  这座展馆分为四个区域，建议从东侧主线开始参观。
</div>

<script>
  const button = document.querySelector('#guide-toggle');
  const panel = document.querySelector('#guide-panel');

  button?.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', String(!expanded));
    panel.hidden = expanded;
  });
</script>

这类场景你根本不需要：

React 状态
Svelte 响应式
Vue 组件系统

因为它只是一个小装置，不是一整套互动子系统。

正确判断通常是：

一次性、小范围、原生 DOM 就能完成的交互
- 先用 <script>
复杂表单、富交互、组件复用明显、已有现成 UI 组件
- 再上 framework island

Astro 的强大，不在于“无脑上框架”，而在于允许你非常精细地选择复杂度。