Skip to main content

Flutter Hooks 与 React Hooks 对比

没问题！我们直接用中文把刚才的回答重说一遍，而且说得更细一点。

你这种感觉完全正确——Flutter Hooks 就是 React Hooks 的“精神移植版”。 flutter_hooks 的作者 Remi Rousselet（也是 Riverpod 的作者）曾公开说过，他很喜欢 React Hooks 的开发体验（DX），所以把它直接“搬”到了 Flutter 里。

下面我帮你拆解：为什么看起来这么像，以及底层到底哪里不一样。

1. 表面上的“像素级”相似（为什么像）​

如果你写过 React，看 Flutter Hooks 的代码会感到极度舒适：

  • 命名完全一致：useState、useEffect、useContext、useReducer、useMemo、useCallback，几乎是 1:1 的映射。
  • 铁律一致：Hooks 必须在顶层调用，不能在条件语句或循环中使用。两个框架都依靠 调用顺序 来正确保存状态。
  • 依赖数组一致：useEffect 的第二个参数是依赖列表 [foo, bar]，依赖不变就不执行，逻辑完全一样。
  • 解决的问题一致：都是为了消灭“嵌套地狱”（React 里的高阶组件 HOC / Render Props，Flutter 里的层层嵌套的 Builder 或 Consumer），并且告别类组件里繁琐的 initState 和 setState。

2. 底层机制的根本性不同（底层原理）​

这是最关键的区别。虽然长得一样，但React Hooks 和 Flutter Hooks 的“引擎”完全不同。

  • React（虚拟 DOM 派）：
    Hooks 的状态存储在当前组件对应的 Fiber 节点（React 内部虚拟 DOM 的链表结构）上。状态变了，React 会重新执行整个函数组件，生成新的虚拟 DOM，然后和旧的虚拟 DOM 进行 Diff，最后把差异更新到浏览器的真实 DOM 上。

  • Flutter（无虚拟 DOM 派）：
    Flutter 没有虚拟 DOM。一个 HookWidget 实际上是一个经过高度优化的 StatefulWidget 的子类。
    底层原理是：Flutter Hooks 在背后只创建了 一个 全能的 State 对象作为“宿主”，所有 useState 的值都存放在这个宿主对象的一个私有 Map / List 里。当 Hook 的数据变化时，它会触发这个宿主执行 setState()，从而重建 Widget 树。

3. 生命周期执行时机的差异（重要！）​

因为 Flutter 没有 React 那种“提交（Commit）到 DOM”的阶段，所以两者的执行时机完全不同：

  • React 的 useEffect：在浏览器绘制（Paint）屏幕之后异步执行，目的是不阻塞浏览器的渲染线程。
  • Flutter 的 useEffect：在 Widget 构建（Build）和布局（Layout）完成之后，但在屏幕真正绘制（Paint）之前同步执行。它是在 Flutter 的渲染管线（Rendering Pipeline）中同步运行的。

4. “Build” 不等于 “Render”（性能认知差异）​

  • 在 React 里，函数执行就代表着虚拟 DOM 的协调（Reconciliation），开销相对较大，所以你需要频繁使用 useCallback 和 useMemo 来避免子组件无效重绘。
  • 在 Flutter 里，build 方法虽然每次状态变化都会重跑，但 Build ≠ Render。build 仅仅返回一个轻量级的配置对象（Widget 树），Flutter 的渲染引擎（Skia）会利用底层的 Element 树进行差异化比对，只重绘真正变化的部分，效率极高。
    因此，Flutter Hooks 对 useCallback 的依赖远没有 React 那么迫切（当然，为了优化子 Widget 重建，它依然提供了这个 API）。

5. 自定义 Hook：最大的共同闪光点​

两者都允许你把复杂的业务逻辑、控制器、动画抽离成自定义 Hook。
在 Flutter 中，这一点极其强大——比如你可以写一个 useAnimationController，它能懒加载创建动画控制器，并在 Widget 销毁时**自动释放（dispose）**资源，彻底告别手动在 dispose 方法里清资源的麻烦。

总结一句话（大白话版）：​

长得像，是因为 Flutter 官方和社区觉得 React Hooks 的写法太爽了，故意“抄”了它的 API 设计。

骨子里不像，是因为 React 跑在虚拟 DOM 上，而 Flutter Hooks 本质上只是给原生的 StatefulWidget 套了一层漂亮且极其轻量的“语法糖”，完全基于 Flutter 自己的 Element 生命周期。

如果你愿意，我可以顺手给你写几个最常用的 Flutter Hooks 对比 React 的代码示例，让你一眼看懂怎么迁移。