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
540
Learning-Hooks
Nokogiri
July 19, 2019
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
FizzBuzzで学ぶOCP
undefined_name
0
25
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
3
1.8k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.2k
モププロ@kintone開発チーム
undefined_name
1
430
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1k
Usefull GitLens
undefined_name
3
640
kintone開発チームにジョインして6カ月の所感
undefined_name
1
260
Trying State Manegemant without Redux(updated)
undefined_name
1
1.2k
5分で紹介するエンジニアの知的生産術
undefined_name
0
76
Other Decks in Technology
See All in Technology
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
830
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
350
既存プロセスからの脱却と変化に適応するために必要なこと
cybozuinsideout
PRO
2
170
チーム単位で保守性を高める:独自指標と向上にむけた実践
tarappo
0
300
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
240
Evolutionary Optimization of Model Merging Recipes
fuyu_quant0
3
520
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
16
3.2k
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
230
Elementaryを用いたデータ品質の可視化とデータ基盤の運用改善
10xinc
6
1.4k
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.2k
KubeCon EU 2024 : Knative Maintainers Session
salaboy
0
370
Cloud Friendly(?) Jenkins. How we failed to make Jenkins cloud native and what we learned?
onenashev
PRO
0
110
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Music & Morning Musume
bryan
39
5.5k
Web Components: a chance to create the future
zenorocha
304
41k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Product Roadmaps are Hard
iamctodd
43
9.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
The Cult of Friendly URLs
andyhume
72
5.6k
What's in a price? How to price your products and services
michaelherold
236
11k
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
ご静聴ありがとうございました'