[読書会]github.com/rrousselGit/flutter_hooks 翻訳及び補足(Principle)

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

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

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

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

Principle

Stateと同様に、フックはWidgetのElementに格納されます。
ただし、1つのStateを持つ代わりに、ElementにはListが格納されます。
フックを使用するには、Hook.useを呼び出す必要がある。

useによって返されるフックは、呼び出された回数に基づいている。
最初の呼び出しは最初のフックを返し、2回目の呼び出しは2回目のフックを返し、3回目の呼び出しは3回目のフックを返す、といった具合である。

この考え方がまだ不明瞭な場合、フックの素朴な実装は次のようになる:

Dart
class HookElement extends Element {
  List<HookState> _hooks;
  int _hookIndex;

  T use<T>(Hook<T> hook) => _hooks[_hookIndex++].build(this);

  @override
  performRebuild() {
    _hookIndex = 0;
    super.performRebuild();
  }
}

フックがどのように実装されているかについては、Reactでどのように行われたかについての素晴らしい記事がある: https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e

コメントを残す