useEffectの間違った使い方についての推論

React で最も間違って使用されるフックは、確か​​に useEffect です。これには 1 つだけではなく、複数の理由があります。私の観点から、それぞれを見てみましょう。

ライフサイクルの遺産

より大きな影響があると私が考える理由の 1 つは、フック以前の時代にクラスを使用していたことです。この時期に React を使い始めた人は、ライフサイクル メソッドと this.state を使用することに慣れています。これについてはこの記事で少し書きました。昔ながらのゴールドクラスの時代を懐かしみ、そのシンプルさと直接性を高く評価する人もいます。これは、オブジェクト指向と命令型プログラミングを学ぶプログラマー一般の常識に非常によく適合するモデルであり、精神構造はまさにそのモデルと結びついています。

その後、フックが追加されました。

パラダイムの精神的変化

問題は、パラダイムシフトが起こったことです。一般にプログラマーは命令型パラダイムとオブジェクト指向パラダイムに精通しており、大学やコースで一般的に教えられており、主に命令型パラダイムは人間の一般的な思考の流れに従っています。

関数型プログラミングなどの別のパラダイムに切り替えると、一般的な考え方とはそれほど似ていない、逆転した考え方に直面することになります。この「逆転」により、理解がさらに難しくなります。

リアクティブ プログラミングでも同じ問題が発生します。これは、プログラミングの能動的な方法から受動的な方法への変化です。 useEffect の間違った使用法でそれが確認されます。

「エラー」 のほとんどは状態の同期です。したがって、開発者は useEffect を使用して状態またはプロパティを追跡し、ロジックに基づいて状態を変更します。この事例は、私たちがここで必要とする逆の考え方を明らかにしています。

OOP および命令型プログラミングでは、積極的に変更やロジックを積極的に実行します。反応性はその逆に基づいており、チャンスに反応し、状態が変化したときにシステムに実行してもらいたい計算を宣言します。

ほとんどのユーザーにとって、useEffect で新しい状態をアクティブに設定するのが直接的な方法であり、状態が変更されるため、手動で変更を追跡し、それによって他の状態を更新する必要があります。ドキュメントには推奨されないと書かれていますが、明確な理由はありません。

React で派生することは、パフォーマンス上の理由だけでなく、概念的な理由からも推奨される方法です。 React は派生マシンであり、その結果、最終的には UI が派生します。これらの状態遷移と再計算を積極的に処理する必要はありません。作成した宣言コードに基づいて処理が行われるだけです。

React ドキュメントではこれについてあまり詳しく説明されておらず、フックの後、React コア チームとコンテンツ作成者はこれらの概念を説明する講演やコースを作成しませんでした。

React の概念的な混乱

React には「概念的な混乱」があるようです。フックへの移行がその最も顕著な例ですが、それだけではありません。フックの使用法には大きな違いが 1 つあります。それは反応性に基づいており、React コア チームは反応性について冗談を言っていますが、それに切り替えるのは彼らの決定です。

機能性コンポーネントはそれに最適です。再レンダリングするたびに関数が再度呼び出され、内部のすべてが状態を取得し、現在のバージョンを維持するため、内部で作成されたものはすべて派生のように動作します。返される JSX は UI の派生です。

しかし、React は関数型プログラミングと反応性の完璧かつ純粋な実装ではありません。コンセプトやアイデアをインスピレーションとして受け取り、それらを結合して独自のモデルを作成しますが、とにかく核はそこにあります。

これは明確にする必要があります。反応性の例ではなくても、その概念が使用されており、パターンをより深く知ることで、開発者がこれらのプリミティブを使用してソリューションを考え、作成することが容易になります。ちなみに、私がこの「React での反応性」シリーズを書いているのはそのためです。

ユーザーに「useEffect で状態を同期しないでください。それは良くありません」と言うだけでなく、それが悪い理由と、「状態の同期」が最初の解決策であると言えるような考え方を説明してください。

いくつかのプリミティブの欠如

この原因は、特に React 19 で改善されつつあるものです。非同期派生は useEffect を使用する原因の 1 つでしたが、今後はプリミティブを使用する必要があり、このギャップを何らかの方法で埋めることができます。

もちろん、動的導出の場合やその他の場合など、プリミティブにはまだ弱点がいくつかありますが、この ref コールバックの場合のように、React は副作用をフック フィールドの外に移動することが増えています。

そして私たちは常に将来のニュースに期待することができます。 React の他のすべての Reactivity に関する投稿をすべて読んで、具体的なケースや質問を提出してください。これにより、リアクティブに関するこれらの一般的な問題に対する解決策をさらに探索して見つけることができます。

以上がuseEffectの間違った使い方についての推論の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。