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
600
Learning-Hooks
Nokogiri
July 19, 2019
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
React Testing Libraryでの WAI-ARIAロールの活用事例
undefined_name
1
90
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
5
1.5k
Pipe Operator (|>) の紹介
undefined_name
2
180
FizzBuzzで学ぶOCP
undefined_name
0
63
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.5k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.3k
モププロ@kintone開発チーム
undefined_name
1
500
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.1k
Usefull GitLens
undefined_name
3
720
Other Decks in Technology
See All in Technology
自社サービスのための独自リリース版Redmine「RedMica」の取り組み
vividtone
0
1.3k
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
0
100
LLVM/ASMを使った有限体の高速実装
herumi
0
120
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
120
四国クラウドお遍路 2024 in 高知 エンディング
yukataoka
0
200
Agile in Automotive Industry, puzzles and lights.
hiranabe
3
1.3k
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
170
eBPFのこれまでとこれから
yutarohayakawa
9
3.1k
不動産 x AIことはじめ~データの真価を拓くために
estie
0
110
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
190
DuckDB雑紹介(1.1対応版)@DuckDB座談会
ktz
6
1.4k
Mocking in Rust Applications
taiki45
1
410
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
The Cult of Friendly URLs
andyhume
76
6k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Infographics Made Easy
chrislema
239
18k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Building Applications with DynamoDB
mza
90
6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
96
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
5
480
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
The Mythical Team-Month
searls
218
43k
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
ご静聴ありがとうございました'