MonLes
MonLes

嘗試從都市叢林回到魔法森林。 更多作品 | https://linktr.ee/monles

React.js — 第01天

老樣子,在使用Documentary和網路資源自學的同時,也別忘了Youtube許多好用的教學,和相當高品質的付費課程



尤其當你是0基礎開始探索程式之路...

Zero to Mastery — Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL)
https://zerotomastery.io/courses/learn-react/


為何是 React?

在傳統前端(JS, CSS, HTML), 使用jQuery(是相當實用的Javascript函式庫--library),用來改善DOM API,讓你更容易在自己的網站使用Javascript。

但jQuery將HTML和JS分開,導致專案若變得複雜會更難管理。

React也是Javascript函式庫

超好用組件(COMPONENT) 和 狀態(STATE)來也.



組件Components

可重複利用,簡單,快速。



虛擬文件物件模型(Virtual DOM)

Document Object Model,縮寫DOM

提供文件的結構表示法,樹狀圖。

改變DOM通常會耗去許多效能,是非常昂貴的成本。

React.js使用虛擬DOM省去許多支出成本,讓整體效能提升。

更多說明| Here is DOC



單向資料流(One Way Data Flow)

資料綁定(data-binding),資料端與UI端之間會透過事件的綁定,一端有變動,另一端會跟著更新。

React 提供stateprops去做狀態的管理與屬性的傳遞

更多說明| Here it is



最後回顧 / 今日關鍵字

  • 宣告式Declarative--相當於資料即畫面
  • JSX
  • Props
  • Components
  • State
  • Virtual DOM


React 開發者的工作

  • 決定組件(Components)
  • 決定state 和它該在哪
  • 決定當state改變,什麼會跟著改變


CC BY-NC-ND 2.0 版权声明

喜欢我的文章吗?
别忘了给点支持与赞赏,让我知道创作的路上有你陪伴。

加载中…

发布评论