問題タブ [react-usememo]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

98 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
1 に答える
314 参照

reactjs - これは React.useMemo を使用するユースケースの 1 つですか?

以下のようなJSXを返すことは、高価な計算/計算と見なされますか? useMemo と useCallback をいつ使用するかについての Kent C Dodds の記事など、いくつかの記事を読みました。それらのほとんどは、アプリが遅いと感じたときにこれらの API を使用するように明示的に述べています。React コミュニティがこれについてどう考えているか知りたい

これが私のコードです：

0 投票する
0 に答える
429 参照

javascript - メモ化された React コンポーネントがまだ再レンダリングされるのはなぜですか?

React.memo を理解しようとしていますが、少し戸惑っています。ユースケースは、コンポーネントをメモ化することで再レンダリングを防いでいると思いましたか? 毎回再レンダリングされているメモ化された Child があります。

- アプリ

----ホーム [ボタンクリックで状態を更新]

------子 [再レンダリングを防ぐためにメモ化されていますが、毎回再レンダリングされます]

私の考えでは、フローは次のように機能するはずです。

  • ユーザーがボタンをクリックする
  • Home はローカルの状態を更新し、数値を +1 増やします
  • これにより、コンポーネントとその子の再レンダリングがトリガーされます
  • メモ化されたコンポーネントが返されると、そのコンポーネントの引数が変更されていないため、古いコンソール ログが表示されるか、何も表示されません。

実際に起こっていること：

  • ユーザーがボタンをクリックする
  • Home はローカルの状態を更新し、数値を +1 増やします
  • これにより、コンポーネントとその子の再レンダリングがトリガーされます
  • メモ化されたコンポーネントが返され、再度ログアウトします。

ログは毎回新しく/新鮮に表示され、子は毎回再レンダリングされます...

私は何かを誤解していますか？

0 投票する
1 に答える
261 参照

reactjs - 変数によってパスが定義されているネストされたフィールドが、依存関係配列に追加されたときに React.useMemo の更新をトリガーするようにします。

TypeScript 4 と React 17 を使用しています

カスタムフックにこのコードがありました：

ESlint は、プログラムでチェックするには myMap.field.[subfieldId] を変数に移動する必要があると訴えました。

だから私はこれに変更しました：

レンダリングのたびに変数を上位のスコープに入れ、再計算するのが良い方法かどうかはわかりません。無限ループが作成されるのではないかとさえ心配しています。

ESLInt は、代わりにこれを提案します。これははるかに簡単です。

React が myMap.field[subfieldId] の変更を検出するには、myMap.field で十分でしょうか? きっとそうでしょう。確かに、オブジェクト参照自体は変更されないため、myMap だけを配置した場合、React は何が変更されたかを認識しませんが、以前と新しい myMap.field を比較すると、React はすべてのサブフィールドをチェックします。そうですか？


12345678910