Help us understand the problem. What is going on with this article?

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コンポーネントにする

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

__sakito__
フロントエンジニアしてます。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした