Feliz: 質問：Happy.ElmishComponentsとHappy.UseElmish

したがって、 Feliz.ElmishComponentsはもはやあまり有用ではなく、 Feliz.UseElmishよりも前のものです。 これは、元々 Feliz.ElmishComponentsがクラスベースのコンポーネントであり、関数コンポーネントとして書き直したためです。 その少し後に、関数コンポーネントの場合、フックに変換するのは簡単であることに気付きました。 このようにしてFeliz.UseElmishが生まれました。 つまり、 Feliz.ElmishComponentsは、実際にはフックを呼び出す単なる関数コンポーネントです。 実際、 Feliz.ElmishComponentsのプロジェクトを見ると、今は小さいことがわかります。

どうもありがとう、コーディ!!! したがって、私が正しく取得した場合、現在、 Feliz.UseElmishがデフォルトです。

ええ、人を壊さないために、私たちはまだFeliz.ElmishComponents持っています。 非推奨と見なすことができます。

完全！ 再度、感謝します！

「非推奨」の場合は、「廃止」とマークして、推奨されるAPIにリダイレクトすることをお勧めします。

どう思いますか？

はい、F＃チームの同僚と、ドキュメントのPRを行う必要があることについて話し合っています（おそらくこの問題へのリンクがあります）

わかりました、ここで行いました-https：//github.com/Zaid-Ajaj/Feliz/pull/264

別の代わりに1つを選択する典型的なシナリオはありますか？ 私はFeliz.UseElmishの使いやすさが大好きで、ここでさらにクールなものが欠けているのではないかと心配しています。 😄

こんにちはローマ、良い質問です！

コーディは、上述のような違いがあることはFeliz.UseElmishの完全なコンポーネントの実装とは対照的に、フックと書かれているFeliz.ElmishComponents 。

ただし、これがすべてではありません。 Feliz.ElmishComponentsとの大きな違いである最後の引数として依存関係配列を使用することによるコンポーネントの再初期化に関しては、 Feliz.UseElmishも_hookセマンティクス_に従うためです。 Feliz.ElmishComponentsは、再初期化がハッキーだった場合にはそれを行いません。入力から一意のコンポーネントキーを作成します。

Feliz.UseElmishは、同じコンポーネント内のサブスクリプションなどの他のフックと組み合わせることもできます。

「再初期化」とはどういう意味ですか？ 次のように、URLの変更に基づいてユーザープロファイルコンポーネントをロードしていると想像してください。

#/user=profile/{userId} -> UserProfile { UserId = userId }

基本的に、入力UserIdが変更されたときに、 UserProfileコンポーネントを再初期化します（ initを呼び出して状態をリセットします）。

type UserProfileProps = { UserId : int }

let UserProfile = React.functionComponent("UserProfile", fun (props: UserProfileProps) -> 
  let state, dispatch = React.useElmish(init props.UserId, update, [| props.UserId |])
  Html.h1 (sprintf "UserProfile(UserId=%d)" props.UserId)
)

// later on application  entry: 

React.router [
  router.onUrlChange (parseUrl >> UrlChanged >> dispatch) 
  router.children [
     match state.CurrentUrl with
     | [ "user-profile"; Route.Int userId ] -> UserProfile { UserId = userId }
     | _ -> Html.h1 "Not found" 
  ]
]

依存関係配列[| props.UserId |]をフック（フックの3番目の引数）に提供するため、コンポーネントは自動的に更新され、 init再度呼び出して、Elmishディスパッチループをリセットします。 initは入力props.UserId関数であり、コンポーネントの小道具が変更されたときに再度呼び出すため、これが必要です。

init関数もupdate関数もコンポーネントの小道具からの追加入力を必要としない場合は、空の依存関係配列を指定するだけです。

let state, dispatch = React.useElmish(init, update, [| |])

これは通常、アプリケーションのエントリコンポーネントなど、外部からの入力を必要としないコンポーネントに使用されます。

依存関係の配列に慣れるのは少し難しいかもしれませんが、それらは非常に理にかなっています。フックのドキュメントから条件付きでエフェクトを

最後のヒント： Feliz.UseElmishは、従来のElmishアプリで慣れているのと同じように、本格的なElmishディスパッチループを提供するため、非常に強力です。 ただし、コンポーネントが単純な場合、状態とメッセージのタイプを設定するのは少し多すぎる可能性があります。 いくつかの状態フラグが必要ですか？ 次に、 React.useState含むいくつかの状態変数で十分な場合があります。 それ以上の対話なしでいくつかのデータをフェッチしてレンダリングする必要がありますか？ 次に、 React.useDeferredうまくいく可能性があります。 多くのイベントと多くの使用の相互作用がある複雑なページには、Feliz.UseElmishを使用します。

うわー、典型的なザイドの反応。 😄あなたはそれらのことを教え始めるべきです、男！ ようやく理解できました。 再度、感謝します！ ❤️