Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
99
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@__sakito__

React hooksを中心にReactの変化をまとめてみた

どうも、sakitoです。

今回は現在React界隈で起こっていることについて、プロダクトチームに共有したまとめをせっかくならパブリックにしようと思い投稿。

最近のReact界隈でなにが起こっているのか

React hooksとは?

  • 要はclass App extends React.Componentとするようなclassコンポーネントを使わずに、関数コンポーネントでstate操作やライフサイクル的なことをする
  • reduxのconnect的なこともできる
  • これからはstateless componentsはなく、function componentsという呼び方になる

こんな感じにclassコンポーネントが変わる。
左が現在のclassコンポーネントで、右がhooksを使用した関数コンポーネント
https://twitter.com/andychilton/status/1057089468769828864
Dqs9tU_UcAEHUFc.jpg

なにがよいのか?

今まではライフサイクルやstateに副作用のない場合のみstateless componentsにしていた。
その後開発を進めるにつれて、stateless componentsで作ったものに副作用が必要になった場合、classコンポーネントにリファクタリングする手間があった。
hooksによりfunction componentsにできることで、開発途中に上記のようなリファクタリングの手間がなくなる。
さらに詳しい情報はReact - Motivationを読むとよい。

今すぐ使った方がよいのか?

まだhooksの仕様は固まっておらず、今後仕様が変わる可能性があるので、今すぐ使う必要はなさそう。
現在はこのIssueでhooksについてのフィードバックを集めている。

今後の開発について

hooks - Gradual Adoption Strategyを読む限り、classコンポーネントは今後削除される予定もなく、Facebook自体もまだまだclassコンポーネントを使用しているそう。
今後はhooksでclassコンポーネントをサポートする動きもある。
なので、無理にclassコンポーネントを無くしていく方向にしなくても良さそう。

hooksへ段階的に移行できるように、下記を行っておくと良さそうだと個人的に思う。

  • classコンポーネントはライフサイクルやstateのみに集中し、他のメソッドは書かない
  • ライフサイクルやstateを共通化したコンポーネントを作りたい場合は、render propコンポーネントにする

もっと詳しく知りたい人への参考資料

99
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
99
Help us understand the problem. What is going on with this article?