深刻淺出React和Redux學習筆記（一）

React新的前端思惟方式

React的介紹：

1. 如何初始化一個React項目；
2. 如何建立一個React組件；
3. React的工做方式；

1.初始化一個React項目

1.1 create-react-app工具

create-react-app是經過npm發佈的安裝包，在安裝完成Node.js和npm後，在命令行工具中安裝create-react-app:

$ npm install --global create-react-app

初始化命名爲first_react_app的第一個React項目：

$ create-react-app first_react_app

打開此項目，並運行此項目：

$ cd first_react_app
$ npm start

編譯完成後，瀏覽器會自動打開一個網頁，指向本機地址：http://localhost:3000/.

2.增長一個新的React組件

React的首要思想是經過組件(component)來開發應用。

組件(component):可以完成某個特色功能的獨立的、可重用的代碼。

基於組件的應用開發是普遍使用的軟件開發模式，採用分而治之的方法。

2.1 JSX

JSX:JavaScript的語法擴展(eXtension),在javascript中能夠編寫HTML代碼。

2.2 JSX是進步仍是倒退

HTML表明內容，CSS表明樣式，JavaScript表明交互行爲，但這三種語言在三種不一樣的文件中，實際上把不一樣的文件分開管理了，並非邏輯上的「分而治之」。

React的組件能夠把JavaScript、HTML和CSS的功能放在一個文件中，實現了真正的組件封裝。

3.分解React應用

無

4.React的工做方式

React的理念：

歸結爲一個公式， UI=render(data)

公式的含義：用戶看的界面(UI),應該是一個函數(render)的執行結果，只接受數據(data)做爲參數。這個函數是一個純函數。

純函數：沒有任何反作用，輸出徹底依賴於輸入的函數；兩次函數若是輸入相同，獲得的結果也會完成相同；最終的用戶的界面，在render函數確認的狀況下徹底取決於輸入的數據。

React實踐的是「響應式編程」(Reactive Programming),也是React爲何叫React的緣由。

Virtual DOM

React應用經過重複渲染來實現用戶交互。

React利用Virtual DOM,每次只渲染最少的DOM元素。

Web前端優化的一個原則：儘可能減小DOM操做

5.React工做方式的優勢

React利用函數式編程的思惟來解決用戶界面渲染的問題，最大的優點是開發者的開發效率會大大提高，開發出來的代碼可維護性和可閱讀性也大大加強。

React強制全部組件按照數據驅動渲染的模式來工做，不管應用的規模多大，都能讓程序處於可控範圍內。