Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Learning-Hooks
Search
Nokogiri
July 19, 2019
Technology
0
630
Learning-Hooks
Nokogiri
July 19, 2019
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
React Testing Libraryでの WAI-ARIAロールの活用事例
undefined_name
1
120
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
5
1.7k
Pipe Operator (|>) の紹介
undefined_name
2
270
FizzBuzzで学ぶOCP
undefined_name
0
87
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.7k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.5k
モププロ@kintone開発チーム
undefined_name
1
550
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.2k
Usefull GitLens
undefined_name
3
770
Other Decks in Technology
See All in Technology
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
150
短縮URLをお手軽に導入しよう
nakasho
0
110
php-conference-nagoya-2025
fuwasegu
0
110
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
220
クラウドサービス事業者におけるOSS
tagomoris
3
950
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
330
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
510
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
2.7k
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
490
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
130
30分でわかる『アジャイルデータモデリング』
hanon52_
10
2.9k
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
260
Featured
See All Featured
Music & Morning Musume
bryan
46
6.4k
How to Ace a Technical Interview
jacobian
276
23k
RailsConf 2023
tenderlove
29
1k
KATA
mclloyd
29
14k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Building Your Own Lightsaber
phodgson
104
6.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Statistics for Hackers
jakevdp
797
220k
Navigating Team Friction
lara
183
15k
Transcript
/ / React.kyoto v . . Learning-Hooks
Learning-Hooks Taiki Nishi Nokogiri nkgrnkgr @nkgrnkgr プロフィール - サイボウズ株式会社 -
kintoneというプロダクトの開発してます - TypeScript / React / Java - スクラム/モブプログラミング - プロダクトでもReact⼀部使っているが触ったことない - プライベートでなんか作るときにReactを使う程度 ͡Ί·ͯ͠
Learning-Hooks 今⽇お話しすること ࠓߋͳ͕ΒHooksͷษڧͨ͠ͷͰڞ༗͍ͨ͠✍ ‧2018年12⽉にHooksが発表されてから半年ほどReactのキャッチアップサボってた ‧せっかく勉強したので、LTしたい ‧マサカリOK(ただし、優しく殺してください)
Learning-Hooks ⽬次 . Ice Break . Hooksとは . Hooks以前の話 .
Hooks API の紹介
Ice Break
Learning-Hooks Reactの⼈気
Learning-Hooks Reactの⼈気
Learning-Hooks Reactの⼈気
React はいいぞ
Hooksとは
Learning-Hooks Hooksとは Hooks ‧React . で追加されたReactの新機能 (Latest release v .
. ) ‧stateなどのReactの機能をClassでなく関数コンポーネントで使うことができる 例) - useState - useEffect 公式ドキュメント EN : https://reactjs.org/docs/hooks-reference.html JP : https://ja.reactjs.org/docs/hooks-reference.html
あとは公式ドキュメント読んどいて
ではLTにならないので
Hooks出る前は? クラスコンポーネントや Recomposeとの⽐較
Hooks以前の話
Learning-Hooks Hooks以前の話 ΫϥείϯϙʔωϯτͰͳؔ͘ίϯϙʔωϯτ FacebookのReact開発チームは公式⾒解として 関数コンポーネント書くことを優先するように開発者にアナウンスしている。 理由は以下の通り ‧クラス内のthisの挙動が難解 ‧記述が冗⻑になりがちで、時系列が複雑なライフサイクルメソッドの挙動 ‧今後導⼊予定の各種最適化がクラスだと難しい
Learning-Hooks Hooks以前の話 ΫϥείϯϙʔωϯτͰͳؔ͘ίϯϙʔωϯτ ただし、関数コンポーネントは Stateやライフサイクルメソッドが使えない
Learning-Hooks Hooks以前の話 Recompose 関数コンポーネントやHOCのためのサードパーティのReactユーティリティ - Local State - ライフサイクルメソッド -
複数のHOCを合成する 関数コンポーネント + HOC + Recompose は鉄板だった
Learning-Hooks Hooks以前の話 Recompose すでに開発が停⽌が発表されいる 2018年11⽉ React Confで α版のHooksが発表されて、 数⽇後Recomposeは開発停⽌を発表 Recompose作者の
Andrew Clark さんがFacebookでHooksの開発にジョイン
Hooks API の紹介
Learning-Hooks Hooks APIの紹介 ReactのStateを利⽤することができる -useState の引数は初期値 -戻り値の配列の0番⽬は stateの変数 -戻り値の配列の1番⽬は stateを更新可能な関数
useState
Learning-Hooks Hooks APIの紹介 ྫ 関数コンポーネント + Hooks クラスコンポーネント
Learning-Hooks Hooks APIの紹介 Recompose ྫ
Learning-Hooks Hooks APIの紹介 Reactのライフサイクルメソッドに該当 -componentDidMout() -componentDidUpdate() -componentWillUnmount() useEffect - 第⼀引数に関数、第⼆引数に配列を持つ
- doSomethingは初回レンダリング時に実⾏される - watchVarが変更されない限り、再レンダリング時は実⾏されない - 初回レンダリング時のみ実⾏したい場合は空の配列を渡す - 第⼆引数を省略すると再レンダリング時に毎回実⾏される - 戻り値のclearSomethingはアンマウント時に実⾏される
Learning-Hooks Hooks APIの紹介 ྫ 関数コンポーネント + Hooks クラスコンポーネント
Learning-Hooks Hooks APIの紹介 Recompose ྫ
Learning-Hooks Hooks APIの紹介 DOM への参照のための ref オブジェクトを返却する コンポーネントの存在期間全体にわたって 存在し続ける インスタンス変数のような使い⽅ができる
useRef
Learning-Hooks Hooks APIの紹介 特定のPropsが変更されたときだけ コンポーネントを再レンダリングしたい場合 に使う shouldComponentUpdate() に相当するもの shouldComponentUpdateと違って、 親コンポーネントに記載する必要がある
useMemo
Learning-Hooks Hooks APIの紹介 - useContext - useReducer - useCallback -
useImperativeHandle - useLayoutEffect - useDebugValue ͦͷଞHooksAPIs 公式ドキュメント https://ja.reactjs.org/docs/hooks-reference.html
ご静聴ありがとうございました'