ホームページ ウェブフロントエンド jsチュートリアル useEffect の死とその中での動的派生の役割

useEffect の死とその中での動的派生の役割

Dec 05, 2024 am 05:54 AM

The death of useEffect and the dynamic derivations role in it

タイトルは少し「クリック餌」ですが、その考えは間違っていません。

私は useEffect が悪いフックだという意見は持っていません。実際にはまったく逆です。しかし、派生マシンとして機能する React では、状態の同期に useEffect を使用することは最良の選択肢ではなく、コア チームによって推奨されていません。

しかし、ちょっと待って、状態を同期する必要がある場合はどうでしょうか?

はい、それは非常にまれなケースであり、おそらくより良い解決策のオプションがあるとします。ただし、アプリに投稿があり、ユーザーが「いいね!」ボタンをクリックしたときに楽観的な更新を処理するローカル状態が必要であると想像してください。外部状態 (バックエンドから取得) と同期して、同様のことが起こったかどうかを実際に確認します。

変更可能な派生

これは、状態と導出を同時に実行できるプリミティブが必要な場合です。概念的に言えば、それは変更可能な派生であると考えることができます。 Ryan Carniato がこれについて優れたブログ投稿をしていますが、反応性を管理する React の方法に関連していくつかの制限がありますが、この新しいプリミティブは導出と状態を 1 つだけで行うことができます。
デフォルトの動作として派生し、最後に更新された信頼できるソース (サーバーからのデータ プロップ) を取得します。
ユーザーが「いいね!」ボタンをクリックしたときの状態。この変更は一時的なもので、次の依存関係の変更時に上書きされます。

もちろん React にはありませんが、そのようなプリミティブを想像することはできます。良い点:

  • useEffect からユースケースが 1 つ削除されます。
  • これにより、状態として処理できる導出があることが明らかになります。

useMemoState

const [internalState, setInternalState] = useMemoState(() => data, [data]);
ログイン後にコピー
ログイン後にコピー

フックは通常の useMemo と同様に 2 つの引数を受け入れます。最初の引数はメモ関数で、通常は初回に実行され、戻り値は状態になります。 2 番目の引数は、値を追跡し、必要に応じてメモを再計算するためのよく知られた依存関係の配列です。これは、状態/メモ値と状態を一時的に変更するセッターの 2 つの値を含むタプルを返します。

フックの使用は次の例のようになります:

function MemoState ({ data }: { data: State}) {
  const [internalState, setInternalState] = useMemoState(() => data, [data]);

  return (
    <section>
      <p>name: {internalState?.title}</p>
      <p>{internalState?.like ? "liked post" : "not liked post"}</p>
      <button onClick={() => {
        // likePost();
        setInternalState(state => ({
          ...state,
          like: !state.like
        }))
      }}>Like Button</button>
    </section>
  )
}
ログイン後にコピー

こうすることで、このフックが何を行っているのか、何ができるのかを正確に知ることができ、ここで useEffect の必要性がなくなり、問題が状態と派生を同時に必要とするこの概念的なギャップを埋めることができます。皮肉なことに、結果としてエフェクトが不要になります。

React で同様のことを行うにはどうすればよいでしょうか?

React ルールに従い、フックを安全に保つために、今日の React で useEffect を使用して同様のものを作成する必要があります。このようなフックは今後も作られるとは思えませんが、それは誰にも分かりませんよね?

ここで useEffect の使用を避けるには、ミニ状態ライブラリなどの外部コードを使用して処理するか、厳密な React プリミティブを維持したい場合は useRef を使用して値の同期を保つ必要があります。

このアプローチの問題は、React ルールに違反することであり、ドキュメントでは推奨されていません。なぜなら、エフェクトなしで動作させる唯一の方法は、コンポーネントのレンダリング中に参照を同期することであり、まったく安全ではありません。

シンプルかつ安全に保つために、フックの例は次のようになります:

const [internalState, setInternalState] = useMemoState(() =&gt; data, [data]);
ログイン後にコピー
ログイン後にコピー

以上がuseEffect の死とその中での動的派生の役割の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

See all articles