React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

JavaScript React

ReactのuseMemoとは?shouldComponentUpdateを学び理解してみた。

0
0

 

 

本日の記事では、useMemoとshouldComponentUpdateについて解説します。

 

Hooksでは、shouldComponentUpdateの機能をuseMemoで再現できますので、

 

両方について、よく分かってない人は参考になるメモだと思います。

 

そもそもshouldComponentUpdateとは

 

まず、shouldComponentUpdateを知るためには、PureComponentを知る必要があります。

 

Component と PureComponentの違いは、Componentが更新される時に、shouldComponentUpdateを貫通するか否かという風に考えればいいです。

 

だから、propsと stateが常に変化していれば、PureComponentを使わず、Component使えばいいし、propsと stateがあまり変わらなければ、PureComponentを使えばいいです。

 

第一、React自体VirtualDOM機構で差分しかrenderされず性能を保証してくれるため、初心者は気にせずComponentを使用しても問題ないということです。

 

画像の引用元

 

 

つまり、shouldComponentUpdateっていうのは、render関数をなるべく発火させる回数を減らすために、

 

もしもstateが変わっても画面を再描画させる必要ないものがあった場合に、再描画をさせない処理を描けるっていうことですよね。

 

useMemoでshouldComponentUpdateを使える

 

じゃあ、HooksでuseMemoを使うとして、何を目指すのかというとuseMemoはパフォーマンスの改善のために使うということであり、

 

useEffectを別に使わなくてもいいレベルの処理に、あえてuseMemoを使うという感覚を持てばいいと思っています。

 

 

 

 注意点

 

shouldComponentUpdateでは比較が 浅い比較(shallow-Equal) がされるので、

 

オブジェクトのプロパティが同じでも、参照が違う場合、勝手に不本意に再レンダリングされたり

 

逆に、 Immutable規則を守らないとrenderされなかったりするので注意です。

 

Pocket
LinkedIn にシェア

りょすけ
毎月3万人以上のプログラマーが訪れるoff.tokyoで、プログラマーさん向けのアンケートを実施しています、アンケートに無料回答すると、他の人の投票も見ることが出来ます!

学びたいプログラミング言語は何ですか?

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

 vaaaval@gmail.com



  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-JavaScript, React

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.