面试题：前端
前端工程师岗位相关的基础、框架、浏览器、性能和工程化面试准备。
React 的声明式 UI 和传统 DOM 操作有什么区别？
React 的声明式 UI 是用状态描述界面应该长什么样，状态变化后由 React 负责计算并更新视图；传统 DOM 操作则是开发者手动找到节点并一步步修改。
JSX 最终会被编译成什么，为什么组件名要大写？
JSX 是 JavaScript 的语法扩展，构建时会被编译成 React 元素创建代码；组件名大写是为了让编译器区分自定义组件和原生 HTML 标签。
props、state、context 分别适合存什么数据？
props 适合父组件传入的只读输入，state 适合组件自己拥有并会变化的数据，context 适合跨层级共享的环境级信息，不适合替代所有局部状态。
React 组件的 state 更新为什么可能是异步的？
React 的 state 更新会进入调度流程，React 可以为了批处理和渲染性能合并多次更新，所以调用 setState 或 setX 后不能立刻假设当前变量已经变成新值。
React 的受控组件和非受控组件有什么区别？
受控组件的表单值由 React state 驱动，非受控组件的值保存在 DOM 自身状态里，通常通过 ref 在需要时读取。复杂表单更常用受控或混合方案。
列表渲染中 key 的作用是什么，为什么不能随便用 index？
key 用来帮助 React 在同级列表中识别元素身份，从而复用、移动或销毁对应节点；index 只有在列表稳定不增删重排时才相对安全。
Hooks 为什么不能写在条件语句或循环里？
Hooks 依赖每次渲染时稳定的调用顺序来关联内部状态，如果写在条件、循环或提前 return 之后，调用顺序可能变化，React 就无法正确对应每个 Hook 的状态。
setState 或 useState 连续调用时如何保证拿到最新值？
连续更新 state 时，如果下一次状态依赖上一次状态，应使用函数式更新；如果后续逻辑需要新值，可以先计算 nextValue，再同时用于 setState 和业务逻辑。
useEffect 的依赖数组如何工作，常见死循环原因是什么？
useEffect 会在渲染提交后执行副作用，依赖数组决定哪些值变化时重新执行；死循环通常来自 effect 内部更新了依赖，或依赖中包含每次渲染都会变化的新引用。
useLayoutEffect 和 useEffect 的执行时机有什么差异？
useEffect 通常在浏览器完成绘制后异步执行，适合大多数副作用；useLayoutEffect 会在 DOM 更新后、浏览器绘制前同步执行，适合读取布局并立即修正视觉结果。