七公子77的技术博客

场景ReactVue大型复杂应用✅ 灵活性强，生态丰富✅ 适合快速迭代，但需规范代码中小型项目⚠️ 可能过度设计✅ 开发效率高，学习成本低跨平台开发✅ React Native 成熟⚠️ 依赖第三方方案（如 UniApp）团队技术栈✅ 适合有 FP 经验的团队✅ 适合传统前端或新手团队选择 React：追求极致灵活性、函数式编程范式，或需要构建跨平台应用（React Native）。选择 Vue：快速开发、低学习成本，或偏好声明式模板和响应式编程。

是 React 16.8 引入的核心特性，允许在函数组件中使用状态、生命周期等特性，替代类组件的复杂逻辑。：处理组件生命周期中的副作用（如数据请求、DOM 操作、订阅）。：类似 Redux 的状态管理，适合多状态关联或复杂更新逻辑。类似，但会在 DOM 更新后同步执行（在浏览器绘制前）。：状态更新涉及多个子值、依赖前一个状态、需要集中化管理。：在组件树中共享数据，避免逐层传递 props。：在函数组件中定义和更新局部状态。：将组件逻辑封装为可复用的函数。

是 React 16 引入的全新核心算法架构，它重新设计了 React 的渲染机制，旨在解决复杂应用中的性能问题（如动画卡顿、交互延迟等），并为异步渲染和并发模式提供了底层支持。，虽然开发者通常无需直接操作 Fiber，但理解其原理有助于优化应用性能（如避免不必要的渲染、合理使用并发特性）。例如，在大量数据变更时，Fiber 可以将更新拆解为多个帧完成，保持界面流畅。（递归遍历组件树），一旦开始渲染就无法中断，可能导致动画卡顿或交互延迟。将渲染任务分配到不同的帧中执行，避免阻塞主线程。

在不考虑复杂且易出错的和挂载阶段→render→更新阶段→render→卸载阶段推荐迁移到函数组件 + Hooks，代码更简洁且易于维护，无需关注复杂生命周期。// 函数组件等效实现}, []);// render。

关键原则setState是异步的，避免直接依赖当前状态。使用函数参数确保更新基于最新状态。通过回调函数或useEffect处理更新后逻辑。迁移建议：新项目优先使用函数组件 +useState，代码更简洁且易维护。

决策因素选择函数组件选择类组件新项目开发✅ 推荐❌ 不推荐状态管理复杂度✅ 简单到复杂（Hooks 足够）⚠️ 复杂状态逻辑（需结合 Context/Redux）生命周期需求✅ 通过useEffect覆盖大多数场景⚠️ 需要精确控制生命周期阶段团队技术栈✅ 熟悉 Hooks⚠️ 熟悉类组件性能敏感场景✅ 轻量级，易优化⚠️ 需手动优化。

在复杂表单中，关键字段使用受控组件（如用户名、密码），非关键字段使用非受控组件（如备注信息）。直接访问DOM节点的值（通常在提交时读取）。缓存计算结果，或拆分表单为独立子组件（通过。表单数据由DOM自身管理，React通过。避免父组件渲染导致子组件重绘）。设置初始值（仅在首次渲染生效）。表单数据完全由React的。事件同步更新状态，输入值由。属性绑定到React状态。