国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

React - useMemo() を使用すると依然としてキーボード入力が遅くなる
P粉340264283
P粉340264283 2023-09-03 17:16:59
0
1
701
<p>このコードには多くの入力ボックスがあり、各入力ボックスは価格値を変更するために使用されます。 入力ボックスが多數(shù)あるため (エリアごとの価格が 3 つ、価格ごとの価格が 3 つ)、毎回すべてを再レンダリングするのを避けるために、入力ボックスの値を更新する関數(shù)で useMemo を使用しました。コードが長すぎて入力ボックスを制御できないことを避けるために useReducer も使用しました。 </p> <p>ただし、文字(または數(shù)字)を入力すると、すぐに表示されるわけではなく、表示されるまでに時間がかかりますし、ましてや連続入力する場合も同様です。 </p> <pre class="brush:php;toolbar:false;">const handleUpdate = useMemo( () => (プロパティ、値、obid) => { dispatch({ タイプ: "UPDATE_DATA", プロパティ, ペイロード: 値, ID: obid }); }、 [急送] );</pre> <p>そして、リデューサーもあります:</p> <pre class="brush:php;toolbar:false;">function raiser(state, action) { スイッチ (アクション.タイプ) { ... ケース「UPDATE_DATA」: 戻る { ...州、 データ: state.data.map((item) => { if (アイテム.id === アクション.id) { return { ...item, [action.property]: action.payload }; } 返卻物; })、 }; } }</pre> <p>問題 (または解決策) が別の場所にある可能性があるため、コード全體を確認(rèn)することをお勧めします。コード全體を表示するには、このサンドコードボックスのリンクを參照してください。コードの一部をコピーしたため、CSS 形式が悪くなったことをお許しください。 フェッチ関數(shù)がシミュレートされたデータの長い配列に置き換えられていることに注意してください。 </p> <p>リンク: https://codesandbox.io/s/unruffled-feynman-g9nox2?file=/src/App.js</p>
P粉340264283
P粉340264283

全員に返信(1)
P粉420868294

通常、useMemo は、レンダリング中に高価な計算値をキャッシュするために使用されます。ただし、あなたの場合、高価なレンダリング計算は必要なく、入力が変更されるたびに非常に大きなツリーをレンダリングするだけです。実際、すべての狀態(tài)は App コンポーネント上にあるため、アプリ全體が毎回再レンダリングされます。

React でこの問題を最適化する方法は、コンポーネントのレンダリングをできるだけスキップすることです。これを行うには、ページの無関係な部分を異なるコンポーネントに分割します。ロジックを分離したら、React.memo() でラップします。これは、コンポーネントのレンダリングを完全にスキップできる別の最適化手法です。

私にとって、あなたが加えられる最も明白な変更は次のとおりです:

  1. TodosDatos は定數(shù)であり、レンダリングのたびに再定義する必要がないため (メモリを消費する可能性があります)、TodosDatosApp
  2. コンポーネントから移動します。
  3. <Table> を新しいコンポーネントに配置し、React.memo()
  4. を使用してメモ化します。すべてのテーブルの依存関係の値を新しいコンポーネントの props に渡すようにしてください。

これらの変更をここに実裝しました: https://codesandbox.io/s/green-breeze-mmum6n?file=/src/App.js

。入力がほぼ瞬時に行われることがわかります。パフォーマンスを向上させるために、他の場所で複數(shù)の最適化を行うこともできます。 ###
最新のダウンロード
詳細(xì)>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート