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
35

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
58

Other Decks in Programming

See All in Programming
SourceGeneratorのススメ
Avatar for tkym htkym
0
200
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
840
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
190
Oxlint JS plugins
Avatar for kazupon kazupon
1
970
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
610
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
400
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
200
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
2
400
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
AIで開発はどれくらい加速したのか？AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
Avatar for どすこい daisuketakeda
1
2.5k

Featured

See All Featured
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.7k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
910
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
0
260
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
1
53

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)