React:現在のprops.childrenを新しいものと比較する方法

ショビ:

こんにちは、

他の生成されたコンテンツのラッパーとしてのみ機能し、サードパーティのライブラリを使用するコンポーネントを構築しています。このライブラリprops.childrenはのコンポーネントで動作します。これまでのところ良好ですが、このサードパーティのライブラリは、適用したとき、または要素を更新したときに少し遅れます。そして、このライブラリを更新する理由はprops.children変更されたときだけなので、比較this.props.children比較の方法を理解しようnextProps.childrenしていshouldComponentUpdateます。PureRenderMixinが機能するはずだと思っていましたが、私にとっては機能しません。state.listName下の例のように変更しただけでもコンポーネントが再レンダリングされます。

<div>
  List name '{this.state.listName}'
  <br />
  <MyComponent>
    <ul>
      {listOfLi}
    </ul>
  </MyComponent>
</div>

方法、比較の管理方法、props.childrenまたはそのようなことを行う他のオプションはありますか?助けてくれてありがとう!

monastic-panic:

keyReactが提案する子の小道具を使用して、子の配列を指定して、それらを一意に識別する必要があります。各子にはキーがあるため、プロップの変更で子が変更されたかどうかを確実に知ることができます(これがキーのポイントです!)。

React.render(<App><Child key='1'/><Child key='2'/></App>, document.body)

子が変更された場合、各更新の前にチェックするAppコンポーネントでチェックを行います

shouldComponentUpdate(nextProps){
   var oldKeys = this.props.children.map( child => child.key);
   var newKeys = nextProps.children.map( child => child.key);

   //compare new and old keys to make sure they are the same
}

さらに最適化すると、状態の変化の結果として子が変更されることはないため、実際に比較をcomponentWillReceiveProps()行い、次のようないくつかの状態プロパティを設定できますchildrenHaveChanged

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

最後の値を新しい値と比較する方法は?

Reactのみがprops.childrenを返す

React:this.props.childrenの参照にアクセスする方法

FluentAssertions-ShouldBeEquivalentToを空とnullを等しいものとして比較する方法

新しい値と比較するために2番目から最後の値の値を保存する方法

Reactのprops.childrenに相当するSvelte?

既存のjson構造を新しいものとマージして変更する方法

既存の値を下限と上限と比較して新しいパンダシリーズを作成する方法

現在のものと同一の新しいUIViewControllerを作成するIBAction

Imageviewの元の位置を保存し、同じImageviewの新しい位置と比較する方法は?

git diffを自動的に古いものと新しいものと比較しますか?

新しい文字列値と古い文字列値を比較し、新しいものがない場合は古いデータを維持するルーチン

新しい文字列値と古い文字列値を比較し、新しいものがない場合は古いデータを維持するルーチン

古いデータと新しいデータの比較をプロットする方法

2つのファイルを比較し、その間で最も新しい単語を見つける方法

Excel、列を比較するときに等しくないものを返す

javascriptの新しいDate()は、結果を比較すると異なる結果をもたらします

現在の行をcsvの次の行と比較し、unixスクリプトで列の違いを表示する方法

JavaScript の新しい値と最新の値を比較する

Ubuntu20.04でHDDを新しいものと交換する

新しい列の既存のものに値を追加する方法

新しいものと新しいものなしでオブジェクトを作成する

Reactでのペビウス状態と現在/新しい状態の比較

PineScript-高い高値と現在の価格を比較する方法

2つの異なるファイルの2つの列を比較し、一致しないものと新しいものを別々に印刷します

2つのデータフレームを列ごとに比較し、値とともに行のみの違いを表示する方法

React、既知のプロパティとprops.childrenを渡す方法

groupbyの最初と最後の行を比較して新しい値を作成する

各応答node.jsで変数の以前の値を新しい変数値と比較する方法

TOP 一覧

  1. 1

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  2. 2

    Chromeウェブアプリのウェブビューの高さの問題

  3. 3

    Railsで宝石のレイアウトを使用するにはどうすればよいですか?

  4. 4

    Windows 10 Pro 1709を1803、1809、または1903に更新しますか?

  5. 5

    Ansibleで複数行のシェルスクリプトを実行する方法

  6. 6

    アンドロイド9 - キーストア例外android.os.ServiceSpecificException

  7. 7

    Postmanを使用してファイル付きの(ネストされた)jsonオブジェクトを送信する

  8. 8

    tkinterウィンドウを閉じてもPythonプログラムが終了しない

  9. 9

    GoDaddyでのCKEditorとKCfinderの画像プレビュー

  10. 10

    Python / SciPyのピーク検出アルゴリズム

  11. 11

    Swiftのブロックのパラメーターに関するドキュメントのマークアップ形式は何ですか?

  12. 12

    Windows 7では、一部のプログラムは「ビジュアルテーマを無効にする」レジストリ設定を行いませんか?

  13. 13

    Google Playストア:アプリページにリーダーボードと実績のアイコン/バッジが表示されない

  14. 14

    ezdxf pythonパッケージを使用して既存のdxfファイルを変更するにはどうすればよいですか?

  15. 15

    PyCharmリモートインタープリターはプロジェクトタブにサイトパッケージのコンテンツを表示しません

  16. 16

    MySQLでJSON_LENGTHとJSON_EXTRACTを組み合わせる方法は?

  17. 17

    Get-ADGroupMember:このリクエストのサイズ制限を超えました

  18. 18

    ZScalerと証明書の問題により、Dockerを使用できません

  19. 19

    Dynamics365からローカルファイルにアクセスできます。ローカルリソースは許可されていません

  20. 20

    Eclipseプロジェクトをエクスポートすると、不適切なテクスチャリングとクラッシュが発生します。

  21. 21

    CSSのみを使用して三角形のアニメーションを作成する方法

ホットタグ

アーカイブ