初識React.js

React.js是什麼

它是facebook開源的一個前端UI框架。專一於view的庫，能夠和其餘的框架或者庫一塊兒使用。
view是什麼？MVC中的V。

前端系統架構模式-MVC

如下對MVC的瞭解都是基於這篇文章。全棧增加工程師指南

• Model(模型)

用於封裝與業務邏輯相關的數據以及處理數據的方法。

介於數據與控制之間的層級，能夠直接操做數據-增刪改查(數據庫操做)。

• View(顯示)

這個層負責顯示，即用戶界面。

• Controller(控制層)

起到不一樣層的組織做用。

React.js能作什麼

剛開始本身主要是學習阮一峯老師的React 入門實例教程，總結了一些知識。

• 組件

組件是react中構建用戶界面的基本單元。
組件和外界交互：狀態（state）、屬性(props)。狀態更多由組件內部本身維護，屬性則由外部在初始化這個組件時傳遞進來。this.props和this.state都是描述組件的特性。this.props表示一旦定義，就再也不改變的特性。this.state是會隨着用戶互動而產生變化的特性。

• Vritual DOM

數據模型變化須要更新所有的UI界面。
UI界面是一顆DOM樹，對應的咱們建立一個全局惟一的數據模型，每次數據模型有任何變更，都將整個數據模型應用到UI DOM樹上，由react負責去更新須要更新的界面部分。

• 單向數據流

永遠只有從模型到視圖的數據流動。

• 其餘知識點

  • 數據只讀，可以讓react組件僅僅經過比較對象引用是否相等來決定是否要從新Render。

  • ReactDOM.render是React的最基本的方法，用於將模板轉化成HTML，並插入到指定位置。

  • 獲取真實的DOM節點。爲DOM節點上加入 ref 屬性，而後this.refs.[refName] 就會返回這個真實的DOM節點.

  • 組件的生命週期
    分紅三個狀態：Mounting：已插入真是DOM；Updating:正在被從新渲染；Unmounting:已移出真實DOM。

  經過以上文章，大致瞭解react.js的簡單的知識，而後開發一個小demo，實際體驗一下react.js。

React.js實踐

用 React.js 寫一個最簡單的 To-do List 應用

學習這篇文章，瞭解了react.js組件化的思想。將一個小小todo list界面，劃分紅多個組件，組件與組件之間相互組合搭建，最終造成應用。

我在學習搭建todo list小demo時的構建思路是：

• 構建應用界面，劃分每個部分的功能

• 分割應用界面，將界面分割成一個一個小的組件

• 從最小的組件開發，經過上層調用底層，逐一搭建應用，直到最總實現功能。

後續

接下來經過學習如下文章：

使用React和Flask開發一個留言板

再一次加深對React.js的瞭解。堅持！下次實踐但願學習以後，本身設計並開發一個小demo,以後再分享出來。