3つのバギー反応コードの例とそれらを修正する方法

Reactは、同じ機能に対して複数のコーディングアプローチを提供します。一見同等に見えますが、いくつかの方法はより効率的で保守可能です。この記事では、3つの一般的な「バギー」Reactコードの例を強調し、一見正しいコードが回避可能な問題につながる方法を示しています。保守性、回復力、機能性を向上させるためのソリューションを探索します。

この記事では、Reactフックに精通しています。初心者には、CSSトリックに関するKingsley Silasの紹介や公式のReactドキュメントなどのリソースが推奨されます。アプリケーションのクラッシュを引き起こさないが、見落とされていれば予想外の動作につながる可能性がある微妙な問題に焦点を当てます。

バギーコード＃1：状態と小道具の変異

反応の状態または小道具を直接変更することは、重要なアンチパターンです。場合によっては機能しているように見えますが、このプラクティスは微妙なバグを導入できます。

例で説明しましょう。例：カウントを管理する親コンポーネントとそのカウントと5を表示する子供が5。ナイーブなアプローチは、子コンポーネント内のプロップを直接変更する可能性があります。これは最初に機能しますが、状態が単純な数字の代わりにオブジェクトを使用するようにリファクタリングされた場合に問題が発生します。 JavaScriptによるプリミティブとリファレンスタイプの処理により、子コンポーネントのオブジェクトプロップを意図せずに変更することにより、親の状態が変化し、予期しない増分につながります。

解決策

子コンポーネントのレンダリング関数内で変換された値を直接計算することにより、変異を避けます。

 function child（{state}）{
  戻る<div><p>カウント5 = {state.count 5}</p></div> ;
}

より複雑なシナリオについては、変換前に小道具のコピーを作成します。浅いクローニングには、スプレッド構文を使用します。

 function child（{state}）{
  const copy = {... state};
  戻る<div><p>カウント5 = {copy.count 5}</p></div> ;
}

深くネストされたオブジェクトについては、 JSON.parse(JSON.stringify(myobject))または信頼できるクローニングのためにlodashのdeepCloneのようなライブラリを検討してください。または、Immutable.jsを使用すると、データ構造全体に不変性が保証されます。

バギーコード＃2：派生状態

小道具を使用して状態（「派生状態」）を初期化すると、問題が発生する可能性があります。親コンポーネントの状態が変化すると、最初のレンダリング後も子コンポーネントの状態は影響を受けません。これは、コンポーネントデータの単一の真実源の原則に違反します。

解決策

派生状態を避けてください。代わりに、子コンポーネントに独自の状態を独立して管理させます。子供が親からデータを必要とする場合は、それを小道具として渡しますが、子供の状態を初期化するためにそれを使用しないでください。

親の変更に基づいて子の状態をリセットする必要があるシナリオ（例：コレクションのアイテムの編集）には、 key小道具を利用します。 key力を変更すると、子どものコンポーネントの新しいインスタンスを作成して、その状態を効果的にリセットします。

バギーコード＃3：古い閉鎖バグ

古い閉鎖は、 useEffectとイベントハンドラーの一般的な問題です。 useEffect内の非同期操作は、依存関係配列が正しく管理されていない場合、時代遅れの状態または小道具を使用できます。

解決策

useEffectの非同期操作の場合、 setStateの機能的な更新形式を利用して、閉鎖が最新の状態値を使用するようにします。

 effect（（）=> {
  id = setInterval（（）=> {
    setCount（prevcount => prevcount 1）;
  }、1000）;
  return（）=> clearInterval（id）;
}、[]）;

または、 useRefを使用して、状態値への可変参照を維持します。イベントハンドラーの場合、ハンドラー関数内でそれらを参照することにより、最新の状態値にアクセスするか、反応コンポーネントのレンダリングサイクル内でDOM操作を管理するためにリファクタリングしてください。

結論

国家管理と閉鎖行動への慎重な注意は、Reactアプリケーションの微妙なバグを回避するために重要です。これらの一般的な落とし穴とそのソリューションを理解することは、より堅牢で保守可能なコードにつながります。 Reactの機能を効果的に活用し、より深い理解のためにリストされているリソースを参照することを忘れないでください。

以上が3つのバギー反応コードの例とそれらを修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。