0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

お猿さんのためのReactまとめ:Vol.3 React Hooks編

Posted at

前回、前々回自分なりにまとめてみたものの、わかったようなわかってないような不安な気持ちでいっぱいになりました。
今回はReactのHooksについてまとめてみます。
ウキィー!!
##1...React Hooksとは?

  • クラスコンポーネントの機能(stateやライフサイクル)を関数コンポーネントでも使えるようになる。
  • 過去に書いたコードに追加記述をしてもバッティングしない。
  • 記述がシンプルになる。
  • ライフサイクルのように時間の経過に合わせてまとめるのでなく、機能ごとにまとめれる。
  • thisを使わなくても良い。
  • Hook? Hooks? どっち?

##2...useState()
関数コンポーネントでstateを扱う。
React (1).png
記述量はこんなに減り、状態管理が自己完結型でわかりやすくなった。
React (2).png

##3...useEffect()
###①componentDidMount()箇所の変更
関数コンポーネントでライフサイクルを扱う。
こちらもかなり記述量が減り、コードの見通しも改善されている。
React (3).png

React (6).png

###②componentDidUpdate()とcomponentWillUnmount()箇所を追加する。
React (7).png

###③おまけ
React (8).png

React (9).png

React (10).png

参考:日本一わかりやすいReact入門【基礎編】

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?