杭州小厂React前端面试：props与state、受控组件、key与useEffect

《面试题目》

1. 请做一下自我介绍。
2. props 和 state 有什么区别？
3. 受控组件和非受控组件有什么区别？
4. 条件渲染有哪几种写法？
5. props 可以通过哪些方式传递？
6. React 组件的使用原则有哪些？
7. key 有什么用？值能不能用数组的下标？
8. useEffect 依赖传空数组和不传第二个参数有什么区别？
9. 手撕一道字符串处理场景题（原帖未记录具体题面）。

《参考解析》

props 与 state：数据来源和更新权不一样。 props 是父组件传下来的入参，在子组件里是只读的；state 是组件自己持有的内部记忆，只能用 useState 的 setter 或 setState 去改。两者变化都会触发重渲染，区别在于「谁有权改」和「谁拥有它」：props 是单向数据流自上而下的传递通道，state 是本组件私有的可变状态。一个实用的取舍是——凡是能从 props 或已有 state 推导出来的值，就不要再复制一份存进 state，否则两份数据迟早不同步；多个组件要共享同一个状态时，把它上提到最近的公共父组件，而不是各自持有一份再想办法同步。

受控与非受控、条件渲染与 props 传递。 受控组件的表单值由 React 托管：value 绑 state、onChange 回写，React 是唯一数据源；非受控组件把值的所有权交给 DOM，靠 ref 或 defaultValue 读写，提交时再取。选择标准是需求：需要实时校验、联动、动态禁用或一键重置，就用受控；表单字段极多、输入频繁又不需要即时干预时，非受控能省掉每敲一个字一次的重渲染。条件渲染的常见写法有 if 提前 return、三元表达式、&& 短路、switch 或多分支映射，写法本身没有高下，坑在 &&：左侧是 0 或空字符串时会把 0 直接渲染到页面上，所以要么先布尔化、要么改用三元。props 的传递方式包括逐个属性传、{...props} 展开、children 插槽、把函数当 props 传（回调与 render props），跨层级共享则用 Context，而不是一层层手动透传。

key 与 useEffect：列表复用和副作用时机。 key 是 React 在协调（diff）同层子节点时用来识别「这个元素还是原来那个吗」的身份标记，它决定了旧元素是被复用还是被销毁重建。用数组下标当 key，只在列表完全静态、不排序也不增删时勉强安全；一旦插入、删除或重排，下标跟着位置走，React 就会把 A 的状态复用到 B 上，典型症状是输入框内容串台、勾选状态错位、动画乱跳，所以应该用业务上稳定唯一的 id。useEffect(fn, []) 表示只在挂载后执行一次，清理函数在卸载时执行；完全不传第二个参数则是每次渲染后都执行一遍，这也是「依赖数组到底传什么」被追问的原因——传空数组本质是在告诉 React「这个 effect 不依赖任何会变的值」，如果里面其实读了 props 或 state，就会一直拿到首次渲染的旧值。开发模式下 React 会故意把 effect 挂载、卸载、再挂载跑一遍，用来暴露没写清理的副作用，别把它当成 bug。

组件原则与这道手撕题怎么准备。 React 的组件使用原则可以概括成几条：单一职责、渲染保持纯净（不直接改 props 和 state）、数据向下传、事件向上抛、组合优先于继承，以及状态尽量放在离使用点最近的地方。关于手撕，原帖没记下题面，只写了是字符串处理场景题，作者自己的复盘是准备不足、环境不太顺手，几轮里有的考算法题、有的考场景题、有的问项目场景——所以这类小厂前端面试很少纯背八股，八股和现场编码通常混在一起。准备字符串题时值得先练清边界：空串与空白、大小写敏感性、Unicode 与代理对、要不要保持原字符串不可变，先把边界说清楚再写主逻辑，比一上来就写循环更容易拿到分。