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

How Hooks Work under the Hood?

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for miycctwn miycctwn
August 25, 2020
Programming
38
0

How Hooks Work under the Hood?

公司內部 React workshop 分享

Avatar for miycctwn

miycctwn

August 25, 2020

More Decks by miycctwn

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

Other Decks in Programming

See All in Programming
AWS Transform Custom による Spring Boot 2.xから4.xへのVerUp
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
100
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
Avatar for Tatsuki tatsuki12
4
1k
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
170
typoなんかねぇよ
Avatar for らすぴー raspython3
0
480
いまどきの Codex で開発する visionOS アプリの開発スタイルについて
Avatar for kazuhiro hara karad
0
160
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
Avatar for Daisuke Garaike contour_gara
0
580
片田舎のおっさん、 Swift Buildのダイアモンド問題解決の不具合修正PRを出すが、解決方法がキャッシュをしないようにすることであり、ビルド時間が伸びると言われてマージされないので高速化もする/swiftbuild
Avatar for yimajo yimajo
0
270
初めての模倣学習とVLA
Avatar for Minoru Natsutani natsutan
0
200
Press start. Python's next generation.
Avatar for Carol Willing willingc
PRO
2
110
MySQLとPostgreSQLって何が違うの？
Avatar for 赤神青空 akagami
0
130
リアルな遅延を測る仕様
Avatar for kota-yata kota_yata
1
120
PostgreSQL 18で考えるUUID主キー
Avatar for Kazuhiro Seo kazuhiro1982
0
500

Featured

See All Featured
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
3
480
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
580
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
420
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
210
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
550
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
260

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)