React.js

1、React概述

React是一個是一個開源的js庫，用來爲數據渲染視圖的，由facebook，Instagram社區維護的。（例如美團、阿里、airbnb都在使用React開發）

爲何會出現React：

頻繁的數據操做-->① 大量的DOM操做（自動操做DOM）；②邏輯會比較複雜（狀態與內容對應起來）

React發展歷史：

2011年 react受php當中xhp框架的影響，部署在facebook的newsfeed；

2012年 Instagram；

2013年 React宣佈在JSConf開源；

2014年 成爲一個github（託管開源項目網站）旗艦級的項目；

2015年 在jsConf，ReactNative技術實現原生開發當中的ui的展示；

React的特色：

①聲明式的設計：輕鬆的描述應用；②高效：虛擬DOM結合算法保證最大限度減小與DOM的交互；③靈活：不是框架，而是一個很是小的庫能夠搭配ui庫、js框架等去使用；④組件：React構建視圖的基本單位；⑤單項數據流；⑥狀態： 內容與狀態對應起來；⑦JSX：js語法的擴展 容許在js中寫HTML

React的相關網址：
reactjs.com  --> facebook.github.io/react
https://www.gitbook.com/book/hulufei/react-tutorial/details

問題：

①React 不支持IE8如下的瀏覽器
②若是你的應用或者站點 不須要頻繁的更新頁面 -->使用React 實現很小的功能，須要編寫不少代碼
③React 年輕的庫，須要開發者去造輪子
④極大的減慢你的速度 react state props

2、React的核心思想和概念

React的核心思想：封裝組件->好處：提升代碼的複用率，下降代碼的複雜度，提升開發速度，提升代碼的質量。各個組件，維護本身的狀態和UI，當狀態改變，自動更新組件

React的概念：①組件；②JSX js的擴展：javaScriptXml並非新的語言。React必須使用jsx的語法，建議咱們使用。特色：支持在js中編寫html，在使用組件時管理組件自己的數據和視圖；③Virtual DOM：大面積操做DOM，性能會有問題，react實現虛擬DOM，組件真實DOM結構映射到虛擬DOM，在虛擬DOM上實現一個DOM算法，當須要更新組件時，會經過diff算法找到須要變動的DOM節點，而後再去更新。真實DOM節點--》元素；虛擬DOM節點--》組件；④數據流：單項數據流，狀態與內容；

3、搭建React的開發環境、使用React

①方式一：引入react.js react-dom.js browser.js 三個js文件

 ReactDOM.render(渲染的內容，渲染的元素)；是React最基礎方法，用於將模板轉爲html語言，插入到指定的DOM節點；

②方式二：CLI命令行

JSX基本語法：①遇到HTML標籤 (<)，使用HTML來解析；②遇到代碼塊（{}），使用js來解析；③註釋，{/*這是一個註釋語句*/}

 組件：

建立組件：

        

注意：①React是根據組件的名稱的首字母是否大寫，判斷是組件仍是普通的html標籤；

　　　②組件類 在render返回的時候，只能有一個頂層標籤，不然會出問題（頂層標籤的元素在return時是不能換行的）

複合組件：經過建立多個組件，來合成一個組件（複合組件），把組件的不一樣功能進行分離。

 props

組件的用法 添加任意屬性

<MainComponent userName="Tom"/>

this.props.userName

this.props對象的屬性與組件的屬性是一一對應的。

this.props.children 表示全部的子節點，返回值有3種（①沒有子節點undefined ②一個子節點object ③多個子節點array）;

React.Children.map(this.props.children,function(child){})

ref

虛擬DOM-->組件

 組件並非真實的DOM節點，內存中的數據結構，也就是虛擬DOM。若是從組件獲取真實DOM的節點，-->ref屬性

<input type='text'  ref='inputTxt'/>
function(){ this.refs.inputTxt-->拿到真實的DOM節點}

     控制檯輸出--》