Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How Hooks Work under the Hood?

Avatar for miycctwn miycctwn
August 25, 2020
Programming
0
33

How Hooks Work under the Hood?

公司內部 React workshop 分享

Avatar for miycctwn

miycctwn

August 25, 2020
Tweet

More Decks by miycctwn

See All by miycctwn
自己的工具自己造，咱們來造 React Hooks!
Avatar for miycctwn mindytai
0
57

Other Decks in Programming

See All in Programming
perlをWebAssembly上で動かすと何が嬉しいの？？？ / Where does Perl-on-Wasm actually make sense?
Avatar for mackee mackee
0
230
tparseでgo testの出力を見やすくする
Avatar for utagawa kiki utgwkk
2
310
Context is King？ 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
Avatar for r-kagaya rkaga
10
1.5k
2年のAppleウォレットパス開発の振り返り
Avatar for muno92 muno92
PRO
0
130
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
480
Navigating Dependency Injection with Metro
Avatar for HyunWoo Lee l2hyunwoo
1
200
Canon EOS R50 V と R5 Mark II 購入でみえてきた最近のデジイチ VR180 事情、そして VR180 静止画に活路を見出すまで
Avatar for kazuhiro hara karad
0
140
ゆくKotlin くるRust
Avatar for TATSUNO Yasuhiro exoego
1
170
AIコーディングエージェント（Gemini）
Avatar for kondai kondai24
0
300
GoLab2025 Recap
Avatar for kuro kuro_kurorrr
0
780
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
170
マスタデータ問題、マイクロサービスでどう解くか
Avatar for Kato Keisuke kts
0
150

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
400
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
170
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
250
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
1
660
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
0
3.4k

Transcript

  1. How Hooks Work under the Hood?

  2. 01 JS Closure

  3. Scope Chain 切分變數最有效範圍是 function

  4. 試看以下程式碼

  5. None

  6. 內層的 function 可以讀取外層宣告的變數 但外層的 outer function 存取不到內層變數 若是自己層級找不到會一層一層往外找 直到 Global

  7. None

  8. function 是被定義的當下決定的 並不是被呼叫才被定義

  9. Closure 當 inner function 被回傳後 可以取得內部函式環境裡的變數值 記住了當時的環境 這就是閉包！

  10. 0 2 useState

  11. None

  12. 如果要更貼近真實的 React Hook API state 必須要為變數

  13. None

  14. Module Pattern Javascript Design Pattern

  15. None

  16. Ref 1. Deep dive: How do React hooks really work?

    2. 0 陷阱！0 誤解！8 天重新認識 JavaScript！- 許國政 (Kuro)