前端开发者面试答案

我在生产环境中构建 React 应用已有 [X 年]，使用函数式组件、hooks（useState、useEffect、useContext、useMemo、useCallback、自定义 hooks），以及状态管理模式（Context API、Redux Toolkit、Zustand）。我对 React 的渲染模型有深入理解——能判断何时会发生重新渲染并如何防止不必要的渲染。我也使用过 Next.js 进行服务器端渲染和静态生成，这在数据获取、hydration（客户端水合）和部署方面带来了显著的复杂性。

性能始于度量：Lighthouse 分数、Web Vitals（LCP、FID/INP、CLS）和以用户为中心的指标。我优化包体大小（代码拆分、tree shaking、动态导入）、图片传输（WebP、懒加载、通过 srcset 提供响应式图片）以及渲染性能（memoization、对长列表使用虚拟化）。我审核并减少第三方脚本。在 CI 中设置性能预算，以便在部署前捕获回归。性能是一项功能，维护它需要持续的关注。

我采用移动优先设计，并结合使用 CSS Grid、Flexbox 和响应式单位（rem、%、vw/vh、clamp()）。我在真实设备和 Chrome DevTools 的设备模拟中进行测试。为保证跨浏览器兼容性，我使用 Can I Use 检查功能支持，并在 Chrome、Firefox、Safari 和 Edge 中测试。我使用 PostCSS 和 autoprefixer 添加供应商前缀。我把是否支持 IE11 视为一个具有实际成本影响的业务决策——我会明确说明权衡，而不是简单地回答支持或不支持。

我为可重用性和单一职责设计组件。我将展示型组件（无副作用的“哑”组件）与容器组件（负责数据获取、状态管理）分离。我以设计系统或组件库为基础，在其上构建应用特定的组件。我从使用者的角度考虑组件 API：清晰、最小化、类型良好的 props。我使用 Storybook 对组件进行文档化，便于设计师和其他工程师发现和理解它们。良好的组件设计可以减少重复，使代码库在扩展时更易维护。

我从一开始就内建无障碍：以语义化 HTML 为基础（nav、main、section、button，而不仅仅是 div），在 HTML 语义不足时使用 ARIA 属性，确保可见的焦点样式，足够的颜色对比（至少达到 WCAG AA），所有交互元素均可通过键盘操作，并进行屏幕阅读器测试（VoiceOver、NVDA）。我在 CI 中使用 axe-core 或 Lighthouse 进行自动化无障碍检查。我将无障碍视为质量维度，而非合规性的勾选项——可访问的界面通常对所有人更友好。

我使用过 CSS Modules、BEM、CSS-in-JS（styled-components、Emotion）以及以实用类为主的框架（Tailwind CSS）。我的偏好取决于项目：对于以设计系统驱动的产品我倾向于 Tailwind，对于大型团队中的组件隔离我倾向于 CSS Modules，对于高度动态的样式我倾向于 CSS-in-JS。我对 CSS 的层叠、选择器优先级和堆叠上下文有深入理解——大多数 CSS 错误都源于对这些的误解。我使用自定义属性（CSS 变量）进行主题化，并使用设计代币来保持一致性。

我在早期就参与设计——在设计定稿之前。我会审查 Figma 设计并在设计阶段提出实现方面的关注点（动画复杂度、响应式行为的缺口、无障碍问题），而不是在开发阶段才提出。我能用设计师的语言交流：可以讨论视觉设计概念、字号刻度和布局系统。我也会精确实现设计：像素级关注间距、排版和颜色很重要。当由于约束不得不偏离设计时，我会清晰沟通并确保达成一致。

我测试用户可见的行为，而不是实现细节。我使用 React Testing Library 进行组件测试——模拟用户交互并断言输出。我使用 Cypress 或 Playwright 为关键用户流程（登录、结账、表单提交）编写集成测试。对于工具函数，我用 Jest 编写单元测试。在组件和集成测试中，我使用 MSW（Mock Service Worker）模拟外部依赖（API 调用）。我避免测试会使测试变得脆弱的实现细节——测试应提供信心，而不是带来维护负担。