從頭寫一個 React 有多難？ - Yang Lin

tags: COSCUP2020 中階 TR313

歡迎來到 https://hackmd.io/@coscup/2020 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

點擊本頁上方的 開始用 Markdown 一起寫筆記！
手機版請點選上方 按鈕展開議程列表。

請從這裡開始

簡報

  • 這次的演講以 Rodrigo Pombo 的 Build your own React 為基礎
  • JSX tag -babel transform function-> React.createElement(...)
  • babel 允許自己實作的 React 告訴它改用自己的 transform function
  • 靠 requestIdleCallback render ，避免阻塞 UI thread
  • FiberTree 基本上是個 left-chlid right-sibling tree ，每一個節點再加上指向 parent 的參考
  • 走訪 FiberTree node 時，先看有沒有 child ，再看有沒有 sibling ，都沒有才回到 parent
  • 整棵樹走完以後，才 commit/render 結果到實際的 DOM 上
  • 如果要實現自己的 React Hooks ，至少得做到我們的 fiber 支援 function component 才行，且要知道現在正在處理哪個 fiber ，才能比較對應的 hooks 所依賴的 states 有沒有變化
Select a repo