30歳からのプログラミングスマートフォン用の表示で見る30歳からのプログラミング30歳無職から独学でプログラミングを開始した人間の記録。2019の6日目の記事です。あるuseImperativeHandleについて、説明する。どちらもRefオブジェクトやref属性を使った機能なので、それらを理解していることが前提になる。基本を学ぶことをおすすめする。v16.10.2で動作確認している。forwardRefforwardRefを学ぶための題材として、テキストボックスへのフォーカスを扱う。以下のコードでは、focusボタンを押すとテキストボックスにフォーカスする。App;Refオブジェクトをinput要素のref属性に渡すことで、input要素の操作(この例ではフォーカス)が可能になる。以下のように、input要素がApp直下の要素ではなく、子コンポーネントの要素だった場合は、どうすればいいのか。/>のようにMyInputがpropsとしてrefを受け取り、さらにそれをinputのref属性に渡す、ということは出来ない。refは特殊な属性で、propsには含まれないからだ。そもそも、関数コンポーネントにrefを渡すことは出来ない。そこで、forwardRefを使う。これを使うことで、関数コンポーネントにrefを渡すことができ、さらにそのなかで自由にrefを使うことが出来る。forwardRefは関数を返す関数で、引数として関数コンポーネントを渡すと、そのコンポーネントに機能を追加した新しいコンポーネントを返す。その追加機能によって、関数コンポーネントにref属性を設定できるようになり、設定されたrefは関数コンポーネントの第二引数として受け取る。以下の例では、forwardRefにMyInputを渡して、MyInputをベースとしたWrappedMyInputという新しい関数コンポーネントを作成している。/>とすることで、そのコンポーネントは第二引数としてrefを受け取るようになる。要素を操作することが出来る。App;さて、ここまで書いてきたが、実はforwardRefを使わなくても、同等のことは出来る。refは特殊な属性だと書いたが、裏を返せば、refとは異なる別の名前でRefオブジェクトを渡してしまえば、それで済む。App;customRefという属性を用意し、それを通してpropsのバケツリレーを行うことで、問題なくinput要素にRefオブジェクトを渡せている。そのため、forwardRefの必要性が、私にはよく分からない。各々が独自の属性を用意するのではなく、Refオブジェクトを渡す属性はrefに固定してしまう、ということが可能になるのが、利点なのかもしれない。ひとつで、関数コンポーネントにメソッドを追加し、それを親コンポーネントから使えるようにするための機能。言葉で説明するとイメージしづらいが、サンプルを見れば、大して難しい話でもないということが分かると思う。説明に入る前に断っておくと、他のRefに関する機能と同様、useImperativeHandleも基本的には使用を避けるべき。公式ドキュメントにも、以下のように書かれている。使った手続き的なコードはほとんどの場合に避けるべきですあくまでもこのような機能もある、という話であり、実際に使うケースはほとんどない。useImperativeHandleを使うにはまず、Refオブジェクトを関数コンポーネントに渡す必要があるので、forwardRefを使うことにする。関数コンポーネントのなかで、以下のようにuseImperativeHandleを使う。同様に、関数コンポーネントのトップレベル。}));具体例として、MyInputにlogというメソッドを持たせた。App;こうするとApp側でref.current.logを実行できるようになる。これも、forwardRefを使わずに書くことが可能。依存配列useImperativeHandleは第三引数に依存配列を渡すことが出来る。依存配列については以下の記事に詳しく書いたが、これを正しく使うことで、同じ内容のメソッドを何度も作り直してしまうことを防げる。numb86-tech.hatenablog.comまずは依存配列を使わないパターン。ボタンを押す度にstateが更新されるため再レンダーが発生し、useEffectが実行される。その度にMyInputも再レンダーされるため、都度useImperativeHandleが実行される。するとsomeMethodも新しく作り直されるため、Xは常にfalseとなる。App;MyInputを以下のように書き換えると、useImperativeHandleは初回レンダー時にしか実行されないため、someMethodは同じ参照を指し続ける。そのため、Xは常にtrueになる。2019の20日目の記事です。2019の17日目の記事です。2019の5日目の記事です。はてなブログPro30歳無職から独学でプログラミングを開始した人間の記録。月別アーカイブスポンサーリンクはてなブログをはじめよう!numb_86さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。