コードレビューを行っていたところ、次のような別の開発者によって書かれたコードを見つけました。
function sampleComponent() {
let divRef = {};
return (
<div ref={(el) => { divRef = el }}></div>
)
}
次に、divRef を DOM 要素への参照として使用します。
ただし、私が知っているパターンはcreateRef
、クラスコンポーネントで使用しuseRef
、機能コンポーネントでフックを使用しています。ReactJS の公式https://reactjs.org/docs/refs-and-the-dom.htmlでさえ、将来の React バージョンのインライン ref を避けるように言っています。書くのはレガシーパターンですか?
私が調査できる限り、インラインref
は関数を 2 回レンダリングするため、避けることをお勧めします。
これについて利用可能な他の説明は何ですか?