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

How Hooks Work under the Hood?

miycctwn
August 25, 2020
Programming
0
24

How Hooks Work under the Hood?

公司內部 React workshop 分享

miycctwn

August 25, 2020
Tweet

More Decks by miycctwn

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

Other Decks in Programming

See All in Programming
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
930
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
210
Rustではじめる負荷試験
skanehira
5
1.2k
null or undefined
susisu
22
6.1k
The Future of Frontend i18n : Intl.MessageFormat
sajikix
1
2.5k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
380
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する！Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
2
300
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
140
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.4k
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
110
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
110
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
540

Featured

See All Featured
The Mythical Team-Month
searls
218
43k
Rails Girls Zürich Keynote
gr2m
93
13k
In The Pink: A Labor of Love
frogandcode
139
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
The Cult of Friendly URLs
andyhume
76
5.9k
Infographics Made Easy
chrislema
239
18k
How to Ace a Technical Interview
jacobian
275
23k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Practical Orchestrator
shlominoach
185
10k
Unsuck your backbone
ammeep
667
57k
Designing the Hi-DPI Web
ddemaree
278
34k

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)