useEffect 应该用来做什么?
先理解原理和示例,再练习完整口述与追问。
回答要点
Effect 主要把组件与外部系统同步,例如订阅或外部实例。派生数据通常直接在渲染中计算;明确的按钮提交行为放在事件处理函数中。不要用 Effect 把所有 props 都复制一份到 state。
原理拆解
Effect 用于把已提交的组件状态与外部系统保持同步,例如连接、事件监听或浏览器 API。由现有 props/state 能直接计算出的值,通常应在 render 计算;由用户点击造成的业务操作,通常放事件处理函数。滥用 Effect 维护派生 state 会产生额外渲染和同步漏洞。
示例与推演
fullName 直接由 firstName 与 lastName 拼接,不需要 useEffect 再 setFullName。点击提交订单应在 submit handler 中执行,不能用“submitted 变 true”的 Effect 间接触发并冒重复执行风险。聊天室连接则适合 Effect,随 roomId 建立并在改变或卸载时断开。
易错点
Effect 只在客户端执行,不能作为 SSR 首屏必需内容的唯一获取手段。Effect 依赖不是“我想什么时候执行”的手工开关,而应反映代码读取的响应式输入。
参考回答可直接练习口述
useEffect 是组件提交后与外部系统建立同步的机制,比如连接、订阅或管理非 React 控件。渲染能直接算出的过滤列表就直接计算,昂贵时再评估缓存;用户点击购买这类特定事件应在事件处理函数中执行。这样可以减少重复状态、额外渲染和 Effect 互相触发的循环。
面试官可能继续问追问与完整解答展开收起
追问
筛选列表为什么不一定需要 Effect?Effect 请求数据与框架数据层相比有什么局限?React 官方 Effect 使用边界
追问回答
筛选结果由列表和条件决定,不必再用 Effect 存一份,否则会多一次提交并增加状态不同步风险。Effect 手写请求需要自行处理竞争、缓存、重复请求和瀑布;框架数据层或项目现有请求库可能已经提供这些能力。