讀書筆記-React 啟動與運行: 前言


我是從Hook開始學React,但遇到問題在找解法時,發現很多教學文都會有意無意提到完全不懂得render和生命週期這塊(但Hook出現的其中一個原因就是為了避免提到生命週期...),會想讀這本主要是為了理解React的渲染(render)機制和元件生命週期,順便認識一下完全不懂的Class component。


首先,React的出現說穿了就是要解決使用JavaScript處理UI時,必須對不同資料、反覆使用相同方法執行類似操作所導致的混亂問題,譬如過去可能一再地用到 getElementById()elem.target 等去操作DOM來修改元素資料,此時會發現程式碼會充斥大量的 getElementById('xxx')xxx.target,不僅程式碼可讀性變差,且與UI之間很難有直接連結而難以維護,(若想看些範例了解箇中差異可參考Huli這篇)。

那有沒有辦法我們只修改某個資料的同時,就會一次影響所有跟這個資料相關的其他資料並呈現出相應的UI,而不必花時間和大量程式碼一直操作DOM?

因此React用 state 概念提出了這個想法─ 我們只需事先定義好UI,一旦資料的狀態改變,UI就會反映出資料狀態的變動 ,這就是所謂 宣告式(declarative) 寫法,或者說一種程式語法邏輯表現的典範(paradigm)。

與宣告式相對應的典範──即前述所說JavaScript過去操作UI的程式寫法可以說是命令式(inperative),有關宣告式與命令式的定義和詳細差異可參考Medium這篇,這邊只是想重新試著認識React想解決的問題與重要性。

#React #book #note






你可能感興趣的文章

[ 學習筆記系列 ] 很基礎的 JavaScript 入門 (二) - ES6 語法與 Module

[ 學習筆記系列 ] 很基礎的 JavaScript 入門 (二) - ES6 語法與 Module

SCSS比較 - map vs list / @for vs @each

SCSS比較 - map vs list / @for vs @each

[筆記] JavaScript: Understanding the Weird Parts - Build your own lib/framework

[筆記] JavaScript: Understanding the Weird Parts - Build your own lib/framework






留言討論