Signals.dart 使用教程

Signals.dart 使用教程

signals.dart Complete port of @preact/signals-core to Dart and extensions for common operations 项目地址: https://gitcode.com/gh_mirrors/si/signals.dart

1. 项目介绍

Signals.dart 是一个基于 Preact Signals 的 Dart 库，旨在简化 Dart 和 Flutter 中的响应式编程。它提供了一个细粒度的响应式系统，能够自动跟踪依赖关系并在不再需要时释放它们。Signals.dart 支持 Dart JS（HTML）、Shelf Server、CLI（和 Native）、VM 以及 Flutter（Web、移动和桌面），适用于任何 Dart 项目。

主要特性

• 细粒度响应式：自动跟踪依赖关系并释放不再需要的资源。
• 惰性计算：信号仅在读取时计算值，如果未读取则不会计算。
• 灵活的 API：信号可以以多种方式组合，API 表面简洁。
• 外科手术式渲染：仅标记需要更新的部件树部分，如果已挂载。
• 100% Dart 原生：支持 Dart JS、Shelf Server、CLI、VM 和 Flutter。

2. 项目快速启动

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  signals: ^latest_version

然后运行 flutter pub get 或 dart pub get 来安装依赖。

基本使用

以下是一个简单的示例，展示如何在 Dart 项目中使用 Signals.dart：

import 'package:signals/signals.dart';

void main() {
  // 创建一个信号
  final count = signal(0);

  // 创建一个计算信号
  final doubleCount = computed(() => count.value * 2);

  // 监听信号变化
  effect(() {
    print('Count: ${count.value}, Double Count: ${doubleCount.value}');
  });

  // 更新信号值
  count.value = 1;
  count.value = 2;
}

在 Flutter 中使用

在 Flutter 项目中使用 Signals.dart 可以实现响应式 UI：

import 'package:flutter/material.dart';
import 'package:signals/signals.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final count = signal(0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Signals.dart 示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Watch(
              () => Text('Count: ${count.value}'),
            ),
            ElevatedButton(
              onPressed: () => count.value++,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 应用案例和最佳实践

应用案例

Signals.dart 可以用于各种场景，包括但不限于：

• 状态管理：在 Flutter 应用中管理全局或局部状态。
• 表单验证：实时验证表单输入并显示错误信息。
• 数据绑定：将 UI 组件与数据模型绑定，实现自动更新。

最佳实践

• 避免过度使用：仅在需要响应式更新的地方使用信号，避免不必要的计算。
• 组合信号：利用 computed 和 effect 组合信号，实现复杂逻辑的简洁表达。
• 惰性计算：确保信号仅在需要时计算，提高性能。

4. 典型生态项目

Signals.dart 生态

• signals_core：核心库，提供基本的信号和计算信号功能。
• signals_flutter：Flutter 扩展库，提供与 Flutter 框架的集成。
• signals_lint：Lint 规则库，帮助开发者遵循最佳实践。
• signals_devtools_extension：DevTools 扩展，用于调试和分析信号状态。

相关项目

• Preact Signals：Signals.dart 的灵感来源，提供了类似的响应式编程模型。
• Flutter：Signals.dart 可以与 Flutter 无缝集成，提供强大的 UI 响应式能力。

通过以上模块，您可以快速上手并深入了解 Signals.dart 的使用和生态。

signals.dart Complete port of @preact/signals-core to Dart and extensions for common operations 项目地址: https://gitcode.com/gh_mirrors/si/signals.dart