4

コードレビューを行っていたところ、次のような別の開発者によって書かれたコードを見つけました。

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 回レンダリングするため、避けることをお勧めします。

これについて利用可能な他の説明は何ですか?

4

2 に答える 2