Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Learning-Hooks
Nokogiri
July 19, 2019
Technology
0
440
Learning-Hooks
Nokogiri
July 19, 2019
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
モププロ@kintone開発チーム
undefined_name
1
310
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
840
Usefull GitLens
undefined_name
3
530
kintone開発チームにジョインして6カ月の所感
undefined_name
1
230
Trying State Manegemant without Redux(updated)
undefined_name
1
990
5分で紹介するエンジニアの知的生産術
undefined_name
0
46
登壇者にフィードバックしてみよう
undefined_name
0
33
Does react-redux-firebase spark joy?
undefined_name
1
60
Kotlin+Springbootでサービスを作ってKotlinを好きになったのでその良さを紹介する
undefined_name
0
230
Other Decks in Technology
See All in Technology
【Oracle Cloud ウェビナー】事例から見る規模別クラウド・データベースの選び方 (Oracle Database) (2023年1月18日)
oracle4engineer
PRO
0
100
re:Inventで発表があったIoT事例の紹介と考察
kizawa2020
0
160
SignalR を使ったアプリケーション開発をより快適に!
nenonaninu
0
410
230125 古いタブレットの活用 かーでぃさん
comucal
PRO
0
5.8k
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
230
lt53
98_justdoit
0
110
PCL (Point Cloud Library)の基本となぜ点群処理か_2023年_第2版.pdf
cvmlexpertguide
0
130
【NGK2023S】 ノードエディタ形式の画像処理ツール「Image-Processing-Node-Editor」
kazuhitotakahashi
0
230
創業1年目のスタートアップでAWSコストを抑えるために取り組んでいること / How to Keep AWS Costs Down at a Startup
yuj1osm
3
1.9k
plotlyで動くグラフを作る
kosshi
0
730
2022年に起きたフロントエンドの変化
sakito
29
17k
Optimizing your Swift code
kateinoigakukun
0
1.3k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Infographics Made Easy
chrislema
235
17k
Fireside Chat
paigeccino
16
1.8k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
Music & Morning Musume
bryan
36
4.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
Writing Fast Ruby
sferik
613
58k
How GitHub (no longer) Works
holman
298
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Atom: Resistance is Futile
akmur
256
24k
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
ご静聴ありがとうございました'