Frontend Best Practices

怎么做：

• 可点击的交互元素用 <button> 或 <a>，不用裸 <div>/<span> 绑 onClick。
• 图片加有意义的 alt；装饰性图片用 alt=""。
• 表单每个 <input> 都通过 <label htmlFor> 或 aria-label 关联标签。
• 动态更新的区域（如加载状态、错误提示）加 aria-live 属性，让屏幕阅读器能播报变化。
• 用 Tab 键手动过一遍页面流程，确认焦点顺序合理且每个控件都可聚焦。

正例 / 反例

React：避免内联对象导致的无谓重渲染

// 反例 — 每次 UserList 重渲染，style 和 onSelect 都是全新引用
//         React.memo 形同虚设，UserCard 每次都重渲染
function UserList({ users }: { users: User[] }) {
  const [selected, setSelected] = useState<string | null>(null);

  return (
    <ul>
      {users.map((user) => (
        <UserCard
          key={user.id}
          user={user}
          style={{ padding: '8px', borderRadius: '4px' }}   // ❌ 每次渲染都是新对象
          => setSelected(user.id)}              // ❌ 每次渲染都是新函数
        />
      ))}
    </ul>
  );
}

// 正例 — style 提到组件外，onSelect 用 useCallback 稳定化
//         UserCard 只在 user 数据真正变化时才重渲染
const cardStyle: React.CSSProperties = { padding: '8px', borderRadius: '4px' }; // ✅ 模块级常量，引用稳定

function UserList({ users }: { users: User[] }) {
  const [selected, setSelected] = useState<string | null>(null);

  const handleSelect = useCallback((id: string) => {      // ✅ 依赖不变则引用不变
    setSelected(id);
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <UserCard
          key={user.id}
          user={user}
          style={cardStyle}
         
        />
      ))}
    </ul>
  );
}

React：副作用清理与竞态处理

// 反例 — 没有清理，组件卸载后仍然 setState；快速切换时旧请求覆盖新结果
function UserProfile({ userId }: { userId: string }) {
  const [profile, setProfile] = useState<Profile | null>(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)          // ❌ 无 abort，无竞态保护
      .then((res) => res.json())
      .then((data) => setProfile(data));   // ❌ 组件已卸载时仍然执行
  }, [userId]);

  return <div>{profile?.name}</div>;
}

// 正例 — AbortController 同时解决卸载后 setState 和竞态问题
function UserProfile({ userId }: { userId: string }) {
  const [profile, setProfile] = useState<Profile | null>(null);

  useEffect(() => {
    const controller = new AbortController();              // ✅ 每次 effect 创建新的 controller

    fetch(`/api/users/${userId}`, { signal: controller.signal })
      .then((res) => res.json())
      .then((data) => setProfile(data))
      .catch((err) => {
        if (err.name !== 'AbortError') throw err;         // ✅ 正常取消不报错
      });

    return () => controller.abort();                      // ✅ userId 变化或组件卸载时取消请求
  }, [userId]);

  return <div>{profile?.name}</div>;
}

Vue：避免在模板中内联计算导致重复执行

<!-- 反例 — expensiveSort() 在每次渲染时都重新执行，没有缓存 -->
<template>
  <ul>
    <!-- ❌ 方法调用没有缓存，每次响应式更新都重新排序 -->
    <li v-for="item in expensiveSort(items)" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const items = ref<Item[]>([...]);

function expensiveSort(list: Item[]) {   // ❌ 每次渲染都执行，无缓存
  return [...list].sort((a, b) => a.score - b.score);
}
</script>

<!-- 正例 — 用 computed 缓存，只有 items 真正变化时才重新计算 -->
<template>
  <ul>
    <!-- ✅ sortedItems 是 computed，引用稳定，有缓存 -->
    <li v-for="item in sortedItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const items = ref<Item[]>([...]);

const sortedItems = computed(() =>          // ✅ 依赖 items 变化时才重新计算
  [...items.value].sort((a, b) => a.score - b.score)
);
</script>

Vue：可访问性——交互元素语义化

<!-- 反例 — 用 div 模拟按钮，键盘无法聚焦，屏幕阅读器无法识别 -->
<template>
  <div class="btn-primary" @click="handleSubmit">  <!-- ❌ div 不可键盘聚焦，无 role -->
    提交
  </div>
</template>

<!-- 正例 — 使用语义化 button，天然支持键盘、焦点、屏幕阅读器 -->
<template>
  <button
    type="button"
    class="btn-primary"
    :disabled="isSubmitting"
    :aria-busy="isSubmitting"                <!-- ✅ 提交中时告知辅助技术 -->
    @click="handleSubmit"
  >
    {{ isSubmitting ? '提交中…' : '提交' }}
  </button>
</template>

自查清单

• 每个组件只做一件事，能用一句话说清楚它的职责；超过 300 行的已拆分。
• 所有状态都放在需要它的最近公共祖先，没有把局部状态无谓提升到全局 store。
• 传给子组件的对象字面量和函数均已用 useMemo/useCallback（React）或 computed（Vue）稳定化，没有在渲染函数里内联创建。
• 每个 useEffect / watchEffect 都有对应的清理逻辑（取消请求、清除订阅、清除定时器）。
• 所有可点击交互元素使用 <button> 或 <a>，没有用裸 <div>/<span> 绑 onClick。
• 表单 <input> 都通过 <label> 或 aria-label 关联了文字说明；图片有合适的 alt。
• 用 Tab 键手动走过一遍主要交互流程，焦点顺序正常，每个控件均可聚焦操作。