Tại sao chọn Refena cho OpenHarmony?

Kiểm soát render chính xác

Refena sử dụng cơ chế đồ thị phụ thuộc để chỉ cập nhật thành phần khi trạng thái thay đổi, tối ưu hiệu năng cho thiết bị OpenHarmony.

Ưu điểm chính

• An toàn kiểu dữ liệu: Phát hiện lỗi truy cập provider trong quá trình biên dịch
• Hỗ trợ singleton toàn cục: Thao tác trạng thái không cần BuildContext
• Công cụ gỡ lỗi: Theo dõi lịch sử thay đổi trạng thái

API cốt lõi và chức năng

Cài đặt dependency

dependencies:
  refena: ^1.4.0
  refena_flutter: ^1.4.0

Quản lý trạng thái đơn giản

import 'package:refena_flutter/refena_flutter.dart';

final appearanceProvider = StateProvider<AppearanceMode>((ref) => AppearanceMode.light);

void changeAppearance(Ref ref) {
  ref.notifier(appearanceProvider).update(
    (current) => current == AppearanceMode.light 
      ? AppearanceMode.dark 
      : AppearanceMode.light
  );
}

Xử lý logic phức tạp

class UpdateAction extends ReduxAction<AppData, String> {
  @override
  AppData execute() {
    return currentState.copyWith(info: payload);
  }
}

Kịch bản ứng dụng thực tế

Quan sát dữ liệu phân tán

Sử dụng Observer pattern để đồng bộ trạng thái giữa các thiết bị OpenHarmony.

Quản lý logic đa trang

Cơ chế watch giúp đồng bộ trạng thái giữa các thành phần giao diện phức tạp.

Khuyến nghị tối ưu OpenHarmony

Cải thiện hiệu năng

Sử dụng watch trong phạm vi widget nhỏ để tránh render không cần thiết trên màn hình tần số quét cao.

Tích hợp định tuyến

Truy cập Ref container trong logic nghiệp vụ khi xử lý callback định tuyến native.

Duy trì trạng thái

Khởi tạo dữ liệu bất đồng bộ trong giai đoạn thiết lập RefenaScope.

Ví dụ minh họa

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

final numberProvider = StateProvider((ref) => 0);

void main() {
  runApp(
    RefenaScope(child: const MaterialApp(home: RefenaDemo())),
  );
}

class RefenaDemo extends StatelessWidget {
  const RefenaDemo({super.key});

  @override
  Widget build(BuildContext context) {
    final value = context.watch(numberProvider);

    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Text('Giá trị hiện tại:', style: TextStyle(fontSize: 18)),
            Text('$value', style: TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.notifier(numberProvider).update((v) => v + 1),
        child: Icon(Icons.add),
      ),
    );
  }
}