Flutter性能优化插件re_reselect的使用

Flutter性能优化插件re_reselect的使用

re-reselect 是一个基于 Dart 的选择器库，它是 JavaScript 库 Re-reselect 的 Dart 版本。该库主要用于增强选择器的深层记忆化和缓存管理。

动机

re-reselect 是 reselect_dart 的轻量级封装，旨在通过深层记忆化和缓存管理来增强选择器的功能。使用标准的 reselect 选择器时，如果切换不同的参数，会导致缓存失效，因为默认的 reselect 缓存只能存储一个值。

re-reselect 可以将不同的调用转发到不同的 reselect 选择器，这些选择器存储在缓存中，从而保留计算/记忆化的值。

re-reselect 选择器的工作方式与普通的 reselect 选择器相同，但它们能够根据提供的参数动态地决定是创建一个新的选择器还是查询缓存中的一个选择器。

使用场景

  • 保留选择器的缓存：当连续使用一个或少数几个不同参数调用时。
  • 合并相似的选择器：将其合并为一个。
  • 跨多个组件实例共享带属性的选择器。
  • 在运行时实例化选择器。
  • 增强 reselect 的自定义缓存策略。

示例

以下是一个完整的示例，展示了如何在 Dart 中使用 re-reselect。

import 'package:re_reselect/rereselect.dart';

// 定义原始状态类
class OriginalState {
  final String key;
  final int a;
  final int b;
  final int c;
  final int d;
  
  OriginalState(this.key, this.a, this.b, this.c, this.d);
}

void main() {
  // 第一个状态选择器
  final stateSelector1 = (OriginalState state) => state.a + state.b;

  // 第二个状态选择器
  final stateSelector2 = (OriginalState state) => state.c + state.d;

  // 计算方法
  final combine = (int state1, int state2) => state1 + state2;

  // 创建带有缓存键的选择器
  final selector = createCachedSelector2(
    stateSelector1,
    stateSelector2,
    combine,
    (OriginalState state) => state.key,
  );

  // 将会执行combine方法并打印10
  print(selector(OriginalState('test', 1, 2, 3, 4)));

  // 不会执行combine方法，直接从缓存中打印10
  print(selector(OriginalState('test', 1, 2, 3, 4)));

  // 将会执行combine方法并打印10
  print(selector(OriginalState('test2', 1, 2, 3, 4)));

  // 将会执行combine方法并打印18（因为参数发生了变化）
  print(selector(OriginalState('test2', 1, 10, 3, 4)));

  // 清除缓存
  selector.clearCache();
}

更多关于Flutter性能优化插件re_reselect的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter性能优化插件re_reselect的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter开发中，性能优化是一个重要的课题，特别是在处理大量数据或复杂状态时。re_reselect 是一个性能优化插件，它基于 Reselect 库，用于创建记忆化的选择器（memoized selectors），从而避免不必要的计算和渲染。以下是如何在 Flutter 项目中使用 re_reselect 的示例代码。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 re_reselect 依赖：

dependencies:
  flutter:
    sdk: flutter
  re_reselect: ^x.y.z  # 请替换为最新版本号

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

2. 创建 Store 和 Selector

假设你正在使用 Provider 或 Riverpod 进行状态管理，以下是如何使用 re_reselect 来优化你的选择器。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:re_reselect/re_reselect.dart';

// 假设我们有一个简单的用户状态
final userProvider = StateProvider<User>((ref) => User());

class User {
  String name = '';
  int age = 0;

  // 假设这是从API获取的用户数据
  User.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    age = json['age'];
  }
}

// 创建一个记忆化的选择器来获取用户的全名
final fullNameSelector = createSelector(
  (state) => state.read(userProvider.state),
  (user) => user.name + ' ' + user.age.toString()
);

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('re_reselect Example'),
        ),
        body: Center(
          child: Consumer(
            builder: (context, read, _) {
              // 使用记忆化的选择器来获取全名
              final fullName = read(fullNameSelector);

              return Text(
                fullName,
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 模拟更新用户数据
            context.read(userProvider.notifier).state = User.fromJson({
              'name': 'John Doe',
              'age': 30,
            });
          },
          tooltip: 'Update User',
          child: Icon(Icons.edit),
        ),
      ),
    );
  }
}

3. 解释

  • 依赖添加：在 pubspec.yaml 中添加 re_reselect 依赖。
  • 状态管理：使用 Riverpod 的 StateProvider 来管理用户状态。
  • 记忆化选择器：使用 createSelector 函数来创建一个记忆化的选择器 fullNameSelector。这个选择器依赖于 userProvider 的状态，并返回用户的全名。
  • UI 使用：在 MyApp 组件中，通过 Consumer 组件读取 fullNameSelector 的值，并将其显示在 Text 组件中。
  • 更新状态：通过点击浮动按钮来模拟更新用户数据，这将触发 userProvider 的状态更新，但由于 fullNameSelector 是记忆化的，只有在 user 对象实际改变时，才会重新计算全名。

这样，通过使用 re_reselect，你可以避免在状态未改变时重复计算相同的值，从而提高应用的性能。

回到顶部