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
580
Learning-Hooks
Nokogiri
July 19, 2019
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
5
1.5k
Pipe Operator (|>) の紹介
undefined_name
2
130
FizzBuzzで学ぶOCP
undefined_name
0
54
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.3k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.3k
モププロ@kintone開発チーム
undefined_name
1
470
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.1k
Usefull GitLens
undefined_name
3
700
kintone開発チームにジョインして6カ月の所感
undefined_name
1
270
Other Decks in Technology
See All in Technology
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
760
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
地理情報とAPIのトレンド
nagix
0
160
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
Featured
See All Featured
Designing for humans not robots
tammielis
247
25k
Infographics Made Easy
chrislema
238
18k
Web development in the modern age
philhawksworth
203
10k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Designing Experiences People Love
moore
136
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Adopting Sorbet at Scale
ufuk
71
8.8k
Embracing the Ebb and Flow
colly
81
4.3k
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
ご静聴ありがとうございました'