[嵌牛導(dǎo)讀]
作為前端愛好者，對于“前端”
又愛又恨， 無可奈何， 欲罷不能
作為React“初學(xué)者”，我不得不承認
React, This is really cool !
本文將從一個初學(xué)者的角度來探索，觀察React，希望能夠嘗試用自己的角度去解讀React.
[嵌牛鼻子]
React， 組件化（Component）， 狀態(tài)（state）， 數(shù)據(jù)綁定，狀態(tài)管理， VirtualDOM
[嵌牛提問]
- 當(dāng)你覺得你的代碼組織簡直不能直視， 當(dāng)你覺得你的代碼構(gòu)思時邏輯清晰，可真正寫出來一團糟，這個時候你得停下來，嘗試著去解決為什么自己在用代碼表達邏輯時是混亂的？
- React如何能夠獲得如此青睞，為何具有如此魅力以至于不管項目大小都會去采用React？
- 當(dāng)把React的思想運用在自己的項目中，會產(chǎn)生什么樣的變化，是否會產(chǎn)生正向變化？
[嵌牛正文]
1. MVC
MVC（Model, View, Controller）,模型-視圖-控制器.
對于MVC，存在兩種觀點：
- MVC看作是一種設(shè)計模式
- MVC是一種架構(gòu)方式
我更傾向于后者。
-
Model - 模型
通常用于保存用戶數(shù)據(jù)模型，或者數(shù)據(jù)庫數(shù)據(jù)模型，負責(zé)處理或是管理數(shù)據(jù)邏輯 -
View - 視圖
通常用于構(gòu)建視圖來展示數(shù)據(jù)，負責(zé)顯示來自Model建立的數(shù)據(jù) -
Controller - 控制器
通常被認為是Model 和 View 中間的傳話者，接受來自View層的數(shù)據(jù)，傳遞給Model層更新數(shù)據(jù)，或是接受來自Model完成的數(shù)據(jù) ，交付給View層來展示
之所以提到MVC，是因為React正是擔(dān)任View層這一重要角色，用于構(gòu)建頁面動態(tài)UI。在接收到Controller傳遞的Model數(shù)據(jù)，通過動態(tài)建立組件（Component）組織，嵌套，生成頁面。
2. React核心思想-組件化
組件，Component，是React中非常重要的概念,因為最終生成的向用戶展示的頁面正是由許多個不同的組件，相互組合，嵌套，拼接而成。
如上圖示例所示，頁面組件化
整個頁面 <Index />組件
頂部導(dǎo)航欄 <Nav />組件
中間搜索框 <Search />組件
最終頁面構(gòu)成(僅作示例說明)
<Index>
<Nav />
<Search />
<Index />
當(dāng)我們在設(shè)計View層時，只需要構(gòu)建這３個組件，進行組合即可。整個頁面結(jié)構(gòu)非常清晰明確，代碼簡潔便于維護閱讀。
這其實就是React帶來的好處，它以一種高效的，易于理解的方式來構(gòu)建頁面，整個頁面被分成各個不同的小塊，每個小塊就是一個組件（<Index /> | <Nav /> | <Search />），只需要將這些組件進行組合就可以高效的完成整個視圖層的開發(fā)。
3. 狀態(tài)（state）
class Clock extends React.Component {
constructor() {
super()
this.state = {date: new Date()}; // state 與頁面<h2>內(nèi)容綁定
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
)
}
}
React中頁面有許多個組件構(gòu)成，每一個組件有自己獨立的數(shù)據(jù)（Model）需要展示，為了能夠?qū)?strong>數(shù)據(jù)變化能夠及時的反應(yīng)在視圖層（View），React采用state 將數(shù)據(jù)綁定在頁面，通過這種雙向數(shù)據(jù)綁定可以完美解決數(shù)據(jù)和組件之間的完美同步
Model 變化 ?。怠iew變化
View變化 ?。怠。蚾del變化
END
