前言

由于 React的設計思想極其獨特，屬于革命性創新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。

這個項目本身也越滾越大，從最早的UI引擎變成了一整套前后端通吃的 Web App 解決方案。衍生的 React Native 項目，目標更是宏偉，希望用寫 Web App 的方式去寫 Native App。如果能夠實現，整個互聯網行業都會被顛覆，因為同一組人只需要寫一次UI ，就能同時運行在服務器、瀏覽器和手機。
React主要用于構建UI。你可以在React里傳遞多種類型的參數，如聲明代碼，幫助你渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變量、甚至是可交互的應用組件。

React具備以下優勢：
1.聲明式設計：React 使創建交互式 UI 變得輕而易舉。為你應用的每一個狀態設計簡潔的視圖，當數據變動時 React 能高效更新并渲染合適的組件
2.組件化: 構建管理自身狀態的封裝組件，然后對其組合以構成復雜的 UI。
3.高效：React通過對DOM的模擬，最大限度地減少與DOM的交互。
4.靈活：無論你現在使用什么技術棧，在無需重寫現有代碼的前提下，通過引入 React 來開發新功能。

讓我們來一起學習吧！

1. React入門

1.1. React的基本認識

1). Facebook開源的一個js庫
2). 一個用來動態構建用戶界面的js庫
3). React的特點Declarative(聲明式編碼)Component-Based(組件化編碼)Learn Once, Write Anywhere(支持客戶端與服務器渲染)高效單向數據流
4). React高效的原因虛擬(virtual)DOM, 不總是直接操作DOM(批量更新, 減少更新的次數) 高效的DOM Diff算法, 最小化頁面重繪(減小頁面更新的區域)

1.2. React的基本使用

1). 導入相關js庫文件(react.js, react-dom.js, babel.min.js)
2). 編碼:<div id="container"></div><script type="text/babel">var aa = 123#  #var bb = 'test'ReactDOM.render(<h1 id={bb}>{aa}</h1>, containerDOM)</script>

1.3. JSX的理解和使用

1). 理解* 全稱: JavaScript XML* react定義的一種類似于XML的JS擴展語法: XML+JS* 作用: 用來創建react虛擬DOM(元素)對象
2). 編碼相關* js中直接可以套標簽, 但標簽要套js需要放在{}中* 在解析顯示js數組時, 會自動遍歷顯示* 把數據的數組轉換為標簽的數組: var liArr = dataArr.map(function(item, index){return <li key={index}>{item}</li>})
3). 注意:* 標簽必須有結束* 標簽的class屬性必須改為className屬性* 標簽的style屬性值必須為: {{color:'red', width:12}}* 必須只有一個根標簽

1.4. 幾個重要概念理解

1). 模塊與組件

1. 模塊:理解: 向外提供特定功能的js程序, 一般就是一個js文件為什么: js代碼更多更復雜作用: 復用js, 簡化js的編寫, 提高js運行效率
2. 組件: 理解: 用來實現特定界面功能效果的代碼集合(html/css/js/img)為什么: 一個界面的功能太復雜了作用: 復用編碼, 簡化項目界面編碼, 提高運行效率

2). 模塊化與組件化

1. 模塊化:當應用的js都以模塊來編寫的, 這個應用就是一個模塊化的應用
2. 組件化:當應用是以多組件的方式實現功能, 這上應用就是一個組件化的應用

2. react組件化開發

2.1. 基本理解和使用

1). 自定義的標簽: 組件類(函數)/標簽
2). 創建組件類//方式1: 無狀態函數(簡單組件, 推薦使用)function MyComponent1(props) {return <h1>自定義組件標題11111</h1>}//方式2: ES6類語法(復雜組件, 推薦使用)class MyComponent3 extends React.Component {render () {return <h1>自定義組件標題33333</h1>}}
3). 渲染組件標簽ReactDOM.render(<MyComp />,  cotainerEle)
4). ReactDOM.render()渲染組件標簽的基本流程React內部會創建組件實例對象/調用組件函數, 得到虛擬DOM對象將虛擬DOM并解析為真實DOM插入到指定的頁面元素內部

2.2. 組件的3大屬性: state

1. 組件被稱為"狀態機", 頁面的顯示是根據組件的state屬性的數據來顯示
2. 初始化指定:constructor() {super()this.state = {stateName1 : stateValue1,stateName2 : stateValue2}}
3. 讀取顯示: this.state.stateName1
4. 更新狀態-->更新界面 : this.setState({stateName1 : newValue})

2.2. 組件的3大屬性: props

所有組件標簽的屬性的集合對象
給標簽指定屬性, 保存外部數據(可能是一個function)
在組件內部讀取屬性: this.props.propertyName
作用: 從目標組件外部向組件內部傳遞數據
對props中的屬性值進行類型限制和必要性限制Person.propTypes = {name: React.PropTypes.string.isRequired,age: React.PropTypes.number.isRequired}
擴展屬性: 將對象的所有屬性通過props傳遞<Person {...person}/>

2.2. 組件的3大屬性: refs

組件內包含ref屬性的標簽元素的集合對象
給操作目標標簽指定ref屬性, 打一個標識
在組件內部獲得標簽對象: this.refs.refName(只是得到了標簽元素對象)
作用: 找到組件內部的真實dom元素對象, 進而操作它

2.3. 組件中的事件處理

1. 給標簽添加屬性: onXxx={this.eventHandler}
2. 在組件中添加事件處理方法eventHandler = (event) => {}
3. 使自定義方法中的this為組件對象在constructor()中bind(this)使用箭頭函數定義方法
4. 事件監聽綁定事件監聽事件名回調函數觸發事件用戶對對應的界面做對應的操作編碼

2.4. 組件的組合使用

1)拆分組件: 拆分界面,抽取組件
2)實現靜態組件: 使用組件實現靜態頁面效果
3)實現動態組件①　動態顯示初始化數據②　交互功能(從綁定事件監聽開始)

2.5. 組件收集表單數據

受控組件: 輸入過程中自動收集數據
非受控組件: 提交時手動讀取數據

2.6. 組件的生命周期

1. 組件的三個生命周期狀態:Mount：插入真實 DOMUpdate：被重新渲染Unmount：被移出真實 DOM
2. 生命周期流程:* 第一次初始化顯示: ReactDOM.render(<Xxx/>, containDom)constructor()componentWillMount() : 將要插入回調render() : 用于插入虛擬DOM回調componentDidMount() : 已經插入回調* 每次更新state: this.setState({})componentWillReceiveProps(): 接收父組件新的屬性componentWillUpdate() : 將要更新回調render() : 更新(重新渲染)componentDidUpdate() : 已經更新回調* 刪除組件: ReactDOM.unmountComponentAtNode(div): 移除組件componentWillUnmount() : 組件將要被移除回調
3. 常用的方法render(): 必須重寫, 返回一個自定義的虛擬DOMconstructor(): 初始化狀態(state={}), 綁定this(可以箭頭函數代替)componentDidMount() : 只執行一次, 已經在dom樹中, 適合啟動/設置一些監聽

在這里插入圖片描述

2.7. 虛擬DOM與DOM diff算法

1). 虛擬DOM是什么?

一個虛擬DOM(元素)是一個一般的js對象, 準確的說是一個對象樹(倒立的)
虛擬DOM保存了真實DOM的層次關系和一些基本屬性，與真實DOM一一對應
如果只是更新虛擬DOM, 頁面是不會重繪的

2). Virtual DOM 算法的基本步驟

用JS對象樹表示DOM樹的結構；然后用這個樹構建一個真正的DOM樹插到文檔當中
當狀態變更的時候，重新構造一棵新的對象樹。然后用新的樹和舊的樹進行比較，記錄兩棵樹差異
把差異應用到真實DOM樹上，視圖就更新了

3). 進一步理解

Virtual DOM 本質上就是在 JS 和 DOM 之間做了一個緩存。
可以類比 CPU 和硬盤，既然硬盤這么慢，我們就在它們之間加個緩存：既然 DOM 這么慢，我們就在它們 JS 和 DOM 之間加個緩存。CPU（JS）只操作內存（Virtual DOM），最后的時候再把變更寫入硬盤（DOM）。
在這里插入圖片描述

2.8. 命令式編程與聲明式編程

聲明式編程只關注做什么, 而不關注怎么做(流程),  類似于填空題
命令式編程要關注做什么和怎么做(流程), 類似于問答題var arr = [1, 3, 5, 7]
// 需求: 得到一個新的數組, 數組中每個元素都比arr中對應的元素大10: [11, 13, 15, 17]
// 命令式編程
var arr2 = []
for(var i =0;i<arr.length;i++) {arr2.push(arr[i]+10)
}
console.log(arr2)
// 聲明式編程
var arr3 = arr.map(function(item){return item +10
})
// 聲明式編程是建立命令式編程的基礎上// 數組中常見聲明式方法map() / forEach() / find() / findIndex()