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

How Hooks Work under the Hood?

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for miycctwn miycctwn
August 25, 2020
Programming
36
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
61

Other Decks in Programming

See All in Programming
野球解説AI Agentを開発してみた - 2026/02/27 LayerX社内LT会資料
Avatar for Shinichi Nakagawa shinyorke
PRO
0
380
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
Avatar for Tasuku Watanabe tasukuwatanabe
3
430
メッセージングを利用して時間的結合を分離しよう #phperkaigi
Avatar for Takuma Kajikawa kajitack
3
520
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1.3k
Nuxt Server Components
Avatar for wattanx wattanx
0
220
AIコードレビューの導入・運用と AI駆動開発における「AI4QA」の取り組みについて
Avatar for ハゲワシ hagevvashi
0
580
「速くなった気がする」をデータで疑う
Avatar for Leaf senleaf24
0
110
AI Assistants for Your Angular Solutions @Angular Graz, March 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
Avatar for Z.O.E. ikezoemakoto
0
310
「接続」—パフォーマンスチューニングの最後の一手 〜点と点を結ぶ、その一瞬のために〜
Avatar for 武田 憲太郎 kentaroutakeda
4
2.2k
年間50登壇、単著出版、雑誌寄稿、Podcast出演、YouTube、CM、カンファレンス主催……全部やってみたので面白さ等を比較してみよう / I’ve tried them all, so let’s compare how interesting they are.
Avatar for nrs nrslib
4
450
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
Avatar for Rikito Taniguchi tanishiking
0
130

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.8k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
870
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
830
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
64
53k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
210

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)