react-01

1. React入門

## 1.1. React基本認識
## 1.2. React基本使用
## 1.3. JSX的理解和使用
## 1.4. 模塊與模塊化, 組件與組件化的理解

2. React組件化編程

## 2.1. 組件的定義與使用
## 2.2. 組件的3大屬性: state, props, refs
## 2.3. 組件中的事件處理
## 2.4. 組件的組合使用
## 2.5. 組件收集表單數據
## 2.6. 組件的生命週期
## 2.7. 虛擬DOM與DOM diff算法
## 2.8. 命令式編程與聲明式編程

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)
  	爲何: 一個界面的功能太複雜了
  	做用: 複用編碼, 簡化項目界面編碼, 提升運行效率

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)
  	使用箭頭函數定義方法(ES6模塊化編碼時才能使用)
4. 事件監聽
	綁定事件監聽
		事件名
		回調函數
	觸發事件
		用戶對對應的界面作對應的操做
		編碼

2.4. 組件的組合使用

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

2.5. 組件收集表單數據

受控組件
非受控組件

2.6. 組件的生命週期

1. 組件的三個生命週期狀態:
	Mount：插入真實 DOM
	Update：被從新渲染
	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(): 必須重寫, 返回一個自定義的虛擬DOM
  	constructor(): 初始化狀態, 綁定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()