React-[核心篇]- 元件 &元件實例&React Element


本篇是我在Udemy-The Ultimate React Course 2023: React, Redux & More 中上課的筆記

當我們在建置應用程式時,其實是從建制許多元件組合而成的

元件, 實例 與元素(components, instances and elements)

什麼是元件components ?

元件就是:

  • 一段UI介面的描述
  • 是函式,這個函式回傳的內容通常是以JSX寫成的,jsx會被轉譯為React elements function calls -> React element 大包物件(element tree)
  • 也是藍圖或是模板(template)->讓React能夠建立單個或多個元件實例模板


(筆記取自Udemy-The Ultimate React Course 2023: React, Redux & More)


什麼是元件實例 component instances ?

元件實例(元件的實體展現):

  • instances are created when we "use" components(當我們在某處使用到元件模板時,就是在創建實例)
  • 你使用該元件幾次,React就會呼叫該元件幾次
  • 每個instances 都有自己的data 和props
  • 也有自己的生命週期

只是方便,通常都把元件實例直接講成“元件”,但意義上兩者還是有所區別的


(筆記取自Udemy-The Ultimate React Course 2023: React, Redux & More)


什麼是React element ?

  • 並不是React element 渲染出元件樹(Dom element / Html)
  • React element只是存在於React app ,它對DOM的生成並沒有做什麼
  • 當React element被繪製/渲染在畫面上時,React element僅僅只是被轉譯成Dom element








你可能感興趣的文章

Promise 非同步處理

Promise 非同步處理

七天學會 swift - 基礎篇 Day1

七天學會 swift - 基礎篇 Day1

Git 基礎概念與版本控制操作

Git 基礎概念與版本控制操作






留言討論