Getx三方状态库的使用和原理

前言：状态库的使用可以使我们简化状态管理。

GetX 的核心原理就是响应式编程，它通过.obs将普通变量转化为响应式变量，并通过 Obx 监听变量变化，从而实现自动更新 UI。同时，它还通过依赖注入和高效的路由管理等功能，简化了 Flutter 应用的开发过程。

1、响应式编程 (Reactive Programming)

GetX 利用了响应式编程的思想。当你使用 GetX 管理状态时，你的 UI 会根据状态的变化自动更新，类似于 React 或 Vue 中的"数据绑定"机制。具体来说，GetX 会监听某个状态的变化，且该状态发生改变时，GetX 会自动通知 UI 更新。

• Rx 类型：GetX 中有一种特殊的类型叫做 Rx（Reactive）。 例如，你可以将一个普通变量转化为 Rx 变量，变成一个可观察的对象。当 Rx 变量的值改变时，依赖它的 UI 会自动刷新。

var count = 0.obs;  // 变成响应式变量

• 更新视图：可以使用 Obx() 小部件包裹需要监听的部分。当 count 变化时，Obx 包裹的部分会自动重建。

Obx(() => Text("Count: ${count.value}"));

2、依赖注入

Getx提供了依赖注入的功能，它使得你能够将不同的服务、控制器等注入到不同的部分，避免了显式的传递参数或者使用单利模式来管理对象。 可以通过 Get.put() 方法将一个对象注入到 GetX 的依赖管理中，其他地方可以通过 Get.find() 来获取这个实例。这样调用就非常方便了。

class MyController extends GetxController {
  var count = 0.obs;
  void increment() => count++;
}

Get.put(MyController());  // 注入 MyController 实例

// 在其他地方获取 MyController 实例
var controller = Get.find<MyController>();

3、路由管理

GetX 还提供了路由管理功能，它的路由系统比 Flutter 原生的路由系统更加简洁高效。你可以通过 Get.to()、Get.back() 等方法轻松控制页面跳转，并且 GetX 路由系统支持参数传递、路由管理的生命周期管理等功能。

Get.to(SecondPage(), arguments: "Hello");  // 页面跳转并传递参数
var message = Get.arguments;  // 获取传递的参数

4、高效的性能

GetX 在性能上非常高效，它通过最小化渲染和更新的次数来实现高性能。例如，GetX 会只刷新和更新需要更新的部分，而不是整个页面或组件。它采用了智能监听机制，只有当需要重新构建的部件依赖的状态发生变化时，才会触发更新。

5、Getx更新的方法

1、使用obs，监听参数，然后用obx包裹组件，一旦参数改变，就会更新界面。

var count = 0.obs;  // 声明一个响应式变量
// 更新 UI
Obx(() => Text("Count: ${count.value}"));

2、使用obs，监听参数，然后用GetX来包裹需要更新的widget。

var count = 0.obs;
// 使用 GetX 来更新 UI
GetX(
  builder: (controller) {
    return Text("Count: ${count.value}");
  },
);

3、GetBuilder

GetBuilder 是另一种更新页面的方法，它提供了一种更细粒度的控制，适用于更复杂的场景。GetBuilder 只会重新构建指定的部分，而不会重新构建整个页面。

• 与 Obx 不同，GetBuilder 需要手动调用 update() 来触发更新。

class MyController extends GetxController {
  var count = 0;

  void increment() {
    count++;
    update();  // 手动更新视图
  }
}

// 使用 GetBuilder 包裹
GetBuilder<MyController>(
  builder: (controller) {
    return Text("Count: ${controller.count}");
  },
);

4、使用 Get.update() 更新控制器的状态

如果你需要更新一个控制器的状态，你可以使用 Get.update() 来触发更新。

var controller = Get.put(MyController());
controller.increment();
Get.update();  // 手动触发更新