這篇博文主要涉及到初學React時所總結的內容，也是我從最開始的認識React到後面的逐漸深入學習的歷程，而這篇是開始，當然不會是結束。 ...
一、何為react
Facebook在F8會議上首次提出這個概念，一套全新的框架就此誕生。
- React 不是一個完整的 MVC、MVVM 框架，其只負責 View 層
- React 跟 Web Components 不衝突
- React 的特點就是“輕”，數據單向綁定，獨立、小巧、快速、創新
- 組件化的開發思路，小組件構成大組件，高度可重用
而react則廣泛應用於
- 複雜場景下的高性能
- 重用組件庫，組件組合
二、react組件基礎
1、react虛擬dom概念
當一個數據改變時，而你又需要將它實時反應到UI上時，你就需要對DOM進行操作，但是複雜或頻繁的DOM操作通常是性能瓶頸產生的原因，於是我們在app源碼和DOM之間加入了虛擬DOM（Virtual DOM）。
所以在React中，render執行的結果得到的並不是真正的DOM節點，結果僅僅是輕量級的JavaScript對象，我們稱之為virtual DOM。
虛擬DOM是React的一大亮點，具有batching(批處理)和高效的Diff演算法。這讓我們可以無需擔心性能問題而”毫無顧忌”的隨時“刷新”整個頁面，由虛擬 DOM來確保只對界面上真正變化的部分進行實際的DOM操作。如果沒有 Virtual DOM，簡單來說就是直接重置 innerHTML。這樣操作，在一個大型列表所有數據都變了的情況下，還算是合理，但是，當只有一行數據發生變化時，它也需要重置整個 innerHTML，這時候顯然就造成了大量浪費。
2、react組件
先來個小例子看看什麼是react組件，創建一個js文件
import React from 'react';
import ReactDom from 'react-dom';
export default class ComponentHeader extends React.Component{
render(){
return(
<header>
<h1>yondu is a good father</h1>
</header>
)
}
}這個文件就創建了一個名為ComponentHeader 的組件，值得註意的是export default是可以讓這個組件外用。
然後我們在一個項目的入口文件里引用這個組件
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';//組件文件的相對位置
class Index extends React.Component {
render(){
return(
<ComponentHeader/>
);
}
}//創建可以用ComponentHeader組件的組件Index
ReactDOM.render(<Index/>,document.getElementById('example'));//把你創建的組件在id為example的dom中使用當然在render中，你也可以用一個參數的形式，它的作用是可以用於判斷，例如
var component = <ComponentHeader/>//在render中，就可以直接用component代替<ComponentHeader/>
//所以可以有以下形式
if(ture){
component = <ComponentHeader/>
}
else{
component = <ComponentFooter/>
}以上例子就是創建一個組件然後使用的過程，需要註意的地方是
- 組件的
return函數里返回的html節點只能是一個，如有多個，可以在外麵包一個<div></div> - 如果想讓組件外用，加上
export default
3、JSX內置表達式
三元表達式是JSX裡面經常使用的一種語法，我們先來看一看
render(){
var text="不為空";
return(
<p>{text == "" ？ "內容為空" : "內容為"+text}/p>
)
}首先表達式要用{}包裹，然後三元表達式主要是看三元運算符，語法是 條件 ? 結果1 : 結果2;. 這裡你把條件寫在問號(?)的前面後面跟著用冒號(:)分隔的結果1和結果2。滿足條件時結果1否則結果2。
(b == 5) ? a="true" : a="false";在JSX中用動態綁定時，參數需要用{}包裹，而且外面不需要用引號，例如
render(){
var bool=true;
var name="點一下";
return(
<input type="button" value={name} disabled={bool}>
)
}JSX中的註釋是這樣{/*註釋*/}的形式
4、生命周期
可以利用生命周期函數做到鉤子函數（Hook）的很多功能
- 列表項
- component instantiated 組件初始化
- getDefaultProps( ) 獲取預設屬性的生命周期函數
- getInitialState( ) 獲取初始化
State的函數 - componentWillMount( ) 組件將要載入
- render( ) 渲染
- componentDidMount( ) 組件載入完畢（第一次render( )完畢後）
- props changed 屬性更改
- componentWillReceiveProps( )
- shouldComponentUpdate( )
- componentWillUpdate( ) 組件將要更新
- render( )
- componentDidUpdate( ) 組件更新完畢（第一次render( )完畢，等組件載入完畢）
- setState( )
- component deleted
- componentWillUnmount( ) 組件卸載函數 （第一次render( )完畢，等組件更新完畢）
我們可以看看
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
class Index extends React.Component {
componentWillMount(){
//直接寫邏輯
console.log("Index組件將要載入的時間");
}
render(){
return(
<ComponentHeader/>
);
}
componentDidMount(){
//直接寫邏輯
console.log("Index組件載入完畢的時間");
}
}
ReactDOM.render(<Index/>,document.getElementById('example'));生命周期函數的運用如上就可見一斑了。
