[読書会]github.com/rrousselGit/flutter_hooks 翻訳及び補足(How to create a hook)

Github.com/rrousselGit/flutter_hooks(開始URL: https://github.com/rrousselGit/flutter_hooks?tab=readme-ov-file#existing-hooks)の翻訳及び補足をしてあります。

本ブログの(上記flutter_hooksの)翻訳および解説の目次頁(構成上のトップページ)は次のURLになります。

本頁は、上記のうちの、「How to create a hook」の章の翻訳および解説頁になります。

目次 index【閲覧時間3分】 click !!>>

How to create a hook

Hooks を作成するには 2 つの方法があります。

1.関数

関数はHooks を書くための最も一般的な方法です。 Hooks はもともと合成可能なので、関数は他のHooks を組み合わせてより複雑なカスタムHooks を作ることができます。 以下のコードでは、変数を作成し、値が変更されるたびにその値をコンソールにログ出力するカスタムフHooks ックを定義しています:

関数を使う方法は、カスタムフックを作成する最も一般的な方法です。フックの合成可能性を利用して、他のフックを組み合わせてより複雑なカスタムフックを作成できます。慣例に従って、これらの関数は useというプレフィックスで始まります。

Dart
ValueNotifier<T> useLoggedState<T>([T initialData]) {
  final result = useState<T>(initialData);
  useValueChanged(result.value, (_, __) {
    print(result.value);
  });
  return result;
}

このコードはuseLoggedStateというカスタムフックを定義しています。useStateを使用して変数を作成し、useValueChangedを使ってその変数の値が変わるたびにコンソールにログを出力します。これにより、状態の変化を簡単に追跡できるようになります。

2.クラス

Hooks が複雑になりすぎた場合、Hook.use を使って Hook を継承したクラスに変換することができます。 クラスとして、Hooks は State クラスとよく似た外観になり、ウィジェットのライフサイクルや initHook、dispose、setState などのメソッドにアクセスできるようになります。 通常は、このような関数の下にクラスを隠すのがよい方法です:

Hooks が複雑になりすぎる場合は、クラスに変換してHookを拡張することができます。このクラスは、StatefulWidgetのStateクラスに似ており、initHook、dispose、setStateなどのウィジェットライフサイクルメソッドにアクセスできます。

Dart
Result useMyHook() {
  return use(const _TimeAlive());
}

次のコードは、State の破棄時にその状態が存続していた合計時間を出力するHooks を定義します。

Dart
class _TimeAlive extends Hook<void> {
  const _TimeAlive();

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

class _TimeAliveState extends HookState<void, _TimeAlive> {
  DateTime start;

  @override
  void initHook() {
    super.initHook();
    start = DateTime.now();
  }

  @override
  void build(BuildContext context) {}

  @override
  void dispose() {
    print(DateTime.now().difference(start));
    super.dispose();
  }
}

このコードは_TimeAliveというカスタムフックを定義しており、ウィジェットが存在していた総時間を計算して、ウィジェットが破棄されるときにそれをコンソールに出力します。このように、フックをクラスとして実装することで、より複雑なロジックをカプセル化し、再利用することができます。

これら二つの方法は、フックの利用の柔軟性と再利用性を示しており、より複雑なカスタムフックを作成する場合に有用です。関数ベースのアプローチはシンプルで取り入れやすい一方で、クラスベースのアプローチはより高度な制御が可能です。

コメントを残す