TikTok React Class 与 Function：状态、生命周期与迁移

题目重点：比较实例方法和Hook闭包，说明迁移不是简单一一替换生命周期。

题意与假设

这道练习题保留了面经中值得训练的核心约束，并将需要澄清的条件单独列出。现场拿到变体时，先和面试官确认这些条件。

class组件依实例、this、state/setState与生命周期方法；function组件每次render执行函数，Hook管理状态与效果，局部闭包捕获该次render的值。二者都遵守纯render与提交副作用边界。
class setState常合并对象字段，useState setter替换该state值；迁移对象状态要明确合并策略，不能把同一更新语句机械复制。需要依据旧值时用函数式更新避免闭包陈旧。
effect用来同步外部系统，不是把每个生命周期名字换一个useEffect。订阅需setup/cleanup对称，依赖变化可能重建；把派生值当effect写回state会多一轮render和竞态。
function让逻辑通过custom hooks复用，class可用组合等方式；函数本身并不保证性能更好，profile与更新范围才决定瓶颈。
错误边界等能力依接口仍需适配，既有class可以继续维护；迁移按可测试小块进行，不以重写语言形式替代产品验证。
测试行为一致、状态更新、订阅清理、异常和strict开发重执行，避免只检查最终UI静态快照。

对象state里有name/age，函数式setter若只给{name:new}会丢age（除非按旧对象合并）；class旧合并语义不能直接照搬。异步回调读取某次render闭包，也不等同永远最新this字段。

渲染成本按组件树与计算工作，Hook/class本身不是渐近提速保证；迁移增加测试/风险需按范围控制。