响应式

Flutter 重用/分组通用逻辑的新方法。可以将其视为 React hooks，但适用于 Flutter。

灵感来源于 lit 世界

动机

你是否写过这样的代码？

class AwesomeWidget extends StatefulWidget {
  const AwesomeWidget({Key? key}) : super(key: key);

  @override
  _AwesomeWidgetState createState() => _AwesomeWidgetState();
}

class _AwesomeWidgetState extends State<AwesomeWidget>
    with TickerProviderStateMixin {
  late final TextEditingController emailCtrl;
  late final TextEditingController passwordCtrl;
  late final AnimationController entryAnimation;
  late final AnimationController highLightAnimation;

  @override
  void initState() {
    super.initState();
    emailCtrl = TextEditingController();
    passwordCtrl = TextEditingController();
    entryAnimation = AnimationController(vsync: this);
    highLightAnimation = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    emailCtrl.dispose();
    entryAnimation.dispose();
    highLightAnimation.dispose();
    passwordCtrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

这里有几个问题。

  • 大多数对象管理逻辑是通用的，可以重用。
  • 非常容易忘记一个 `dispose` 调用（自白）。
  • 将逻辑耦合到 widget 使其更难测试。

使用响应式可以将其转换为，

class AwesomeReactiveWidget extends StatefulWidget {
  const AwesomeReactiveWidget({Key? key}) : super(key: key);

  @override
  _AwesomeReactiveWidgetState createState() => _AwesomeReactiveWidgetState();
}

class _AwesomeReactiveWidgetState extends State<AwesomeReactiveWidget> with ReactiveHostMixin {
  late final emailCtrl = ReactiveTextEditingController(this);
  late final passwordCtrl = ReactiveTextEditingController(this);
  late final entryAnimation = ReactiveAnimationController(this);
  late final exitAnimation = ReactiveAnimationController(this);

  @override
  Widget build(BuildContext context) {
    return Container(
        // ....
    );
  }
}

请参阅 示例 来学习如何编写响应式程序，或者直接浏览 源代码，它非常小。

与 flutter_hooks 的比较

从用户角度来看，`flutter_hooks` 是 `StatefulWidget` 的替代品。而 `reactives` 不是。如果你看 `ReactiveHostMixin` 的代码，它大约有 60 行（包括空行）。Reactives 不试图取代 `StatefulWidget`，它只是解决了由于 mixin 的“is-a”关系而固有的可重用性问题。Reactives 具有“has-a”关系。

编写响应式程序没有新的规则。请参阅现有响应式的示例。这基本上是将相同的逻辑隔离在不同的类中。
同样的原因，它不需要像 `useState` 这样在尝试替换 `StatefulWidget` 时所需的许多 hooks。

响应式的学习曲线几乎可以忽略不计。Hooks 需要你学习一些概念以及 如何做/不做。它还要求你转换整个 widgets。Reactives 可以逐步适应，即使只针对单个 widget。

GitHub

https://github.com/ripemango/reactives