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

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

React Hooks で作る GUI

More than 1 year has passed since last update.

当カレンダーの対象読者は Hooks API を少しでも触ったことがあり、公式ドキュメントを確認された方です。Hooks API で、従来の Statefull Component 相当のものが書きやすくなりました。まずは Hooks を利用するモチベーションを、Dan の記事で再確認してみましょう。

  • Huge components that are hard to refactor and test.
  • Duplicated logic between different components and lifecycle methods.
  • Complex patterns like render props and higher-order components.

HOC や render props は complex pattern として、ネガティブに捉えられている様です。HOCを利用したライブラリコードは適宜対応していくとして、これから書く Statefull Component には積極的に Hooks を使って complex を解消していきたいところです。

今まで Statefull Component には、そこに隠蔽して然るべき状態を保持していました。form / animation / ref が代表的なもので、Hooks が stable になった暁にはこれらの代替として利用に差し支え無いでしょう。

🎄 Hooks 大喜利

「Hooks Statefull GUI」をお題に、23日分のサンプルコードを github で公開しました。アドベントカレンダーでは毎日サンプルの実装ポイントを紹介する予定です。

ripple-button toggle-switch photo-carousel drawer-menu
1203.jpg 1204.jpg 1205.jpg 1206.jpg
pallalax-section pallalax-hero stickey-effects stickey-image-loader
1207.jpg 1208.jpg 1209.jpg 1210.jpg
swipe-item-opener swipe-pager swipe-flipper pull-fetcher
1211.jpg 1212.jpg 1213.jpg 1214.jpg
pie-chart radar-chart line-chart bar-chart
1215.jpg 1216.jpg 1217.jpg 1218.jpg
google-map canvas-painter camera-capture chat-board
1219.jpg 1219.jpg 1221.jpg 1222.jpg
modal-queue drag-drop-section photo-album
1223.jpg 1224.jpg 1225.jpg

免責事項

既存の Statefull Component コードを hooks に書き換えることは非推奨とされています。サンプルは、これから新しく書くものとして想定しています。

また、現状で試せるバージョンでのサンプルとなりますので、破壊的変更が入ることが考えられます。あくまでRFC現状での挙動を確認するに留めてください。正しい利用方法か否かは、各位公式の情報を常に照らし合わせてください。

謝辞

サンプル作成にあたり、以下サービスを活用させて頂きました。この場を持ってお礼申し上げます。

https://pixabay.com/
https://www.flaticon.com

41
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
Takepepe
Web Application Developer. interested in TypeScript AST.
dena_coltd
    Delight and Impact the World

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
41
Help us understand the problem. What is going on with this article?