useMemoまたはuseCallbackとuseRefの空の依存関係


9

このGitHubの問題では、基本的に変更を提案しました。

x = useCallback( ... , []);

に:

x = useRef( ... ).current;

2つは同じですが、useRefReactでは依存関係を比較しません。

回答が質問に付いてきました:

依存関係のないuseMemoまたはuseCallbackがuseRefよりも良い選択になる状況はありますか?

考えられませんが、いくつかのユースケースを見落としていたかもしれません。

だから誰もがそのような状況を考えることができますか?

回答:


5

React Hooks APIドキュメントごと:

内容が変更されても、useRefは通知しないことに注意してください。 .currentプロパティを変更しても再レンダリングは発生しません ...コールバック参照を使用すると、子コンポーネントが測定されたノードを後で(たとえば、クリックへの応答として)表示した場合でも、親でそれについて通知されますコンポーネントと測定値を更新することができます。

あなたはここここでそれについてもっと読むことができます


これで問題は解決したと思いますが、これは間違いだと思います。Sandbox Reactの例では、変更useCallback(x,[])useRef(x)て同じように機能します。
Izhaki

useRef(x).currentあれは。
イジャキ

私は間違っていると思いますが、ドキュメントが間違っている理由を主張しました:github.com/reactjs/reactjs.org/issues/2570
Izhaki

useCallback(cb, [])useRef(cb).current自分自身については完全にはわかりません。useMemo(cb, [])は、「依存関係の1つが変更された場合にのみ、メモされた値を再計算する」useRef(cb).currentという意味では異なりuseMemoますが、対useRefいつもどんな値を再計算しないいます。
irasuna

useRef決して再計算しません-常に初期値を返します。
Izhaki

1

useRefを使用してuseCallbackをエミュレートすることも、空の依存関係を使用することもできますが、useCallbackのすべての可能なシナリオで使用することはできません。

またuseCallback with empty dependency、重い比較を実行する必要がないため、useRefまたはuseRef を使用してもパフォーマンスに大きな違いはありません。

また、関数の実装を少し変更して、特定のパラメーターの変更時にそれを再作成する必要がある場合は、単に実装を更新して、useCallback依存関係として追加のパラメーターを追加できます。ただし、useRefを使用して実装する場合は、元に戻す必要があります。useCallback


1
ありがとう。タイトルが示すように、これは完全に空の依存関係のケースです。
Izhaki

1
@Izhaki質問は完全に空の依存関係であることを理解しています。そのため、空の依存関係の場合に違いはないと述べました。しかし、さらに変更を加えようとすると、かなりのリファクタリングが必要になる可能性があります
Shubham Khatri

0

なぜなら、useRef(()=> {...})。currentの出力は変更可能だからです。

これは、コードに奇妙な副作用を引き起こす可能性があります。電流の値はいつでも変更できます。 https://codesandbox.io/s/confident-monad-vjeuw

これは、useRefを使用したくない場合のユースケースです。


1
しかしx = useRef(value).current、変更可能なインスタンスを返すことはrefありません-返されることはありません。currentです。それはuseCallbackバージョンと同じです。
Izhaki
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.