一.React什么算法，什么虛擬DOM，什么核心內容網上一大堆，請自行google。
但是能把算法說清楚，虛擬DOM說清楚的聊聊無幾。對開發又沒卵用，還不如來點干貨看看咋用。
二.結構如下：
import reqwest from 'reqwest'; import React from 'react'; import ReactDOM from 'react-dom'; var Header = React.createClass({ handleClick:function(){ console.log(this.refs.head); console.log(ReactDOM.findDOMNode(this.refs.head)); }, render:function(){ return ( <div style={{ backgroundColor:'blue' }} onClick={ this.handleClick } ref='head'>
<p>Header組件</p>
</div>
) } }) var ComponentDemo = React.createClass({ //默認state
getInitialState() { return { current: 1, openKeys: [], result_data : {} }; }, //默認props
getDefaultProps() { return { key:{ value:2 } }; }, //靜態方法 調用 ComponentDemo. getBusinessName()
statics:{ getBusinessName:function(){ return console.log('getBusinessName方法被調用。。。') } }, handleClick(e) { console.log('div被點擊。。。'); console.log(this.refs.cct); console.log(ReactDOM.findDOMNode(this.refs.cct)) }, componentDidMount: function() { //異步請求
reqwest({ url: 'http://localhost:90/menu', method: 'get', type: 'json' }).then(result => { if(this.isMounted()){ this.setState({ result_data : result.data }); } },function(err, msg){ console.log(err) console.log(msg) }); //使用props
console.log(this.props.key.value) }, componentWillReceiveProps(nextProps) { //接受新的props時候被觸發
}, render() { return ( <div>
<Header ref='cct'/>
<div style={{ height:'100%',width:200 }} className='btn' onClick={ this.handleClick }>CCT部分</div>
</div>
); } }) ReactDOM.render(<ComponentDemo />,
document.getElementById('contain'));
這個例子中涉及了開發中常用的幾個知識點。
1.improt 這樣的引入方式是es6的語法 ，也可require
2.Header是個組件，組件的創建使用React.createClass({}),es6也還有別的寫法，反正我是用不慣
3.每個組件都需要一個render函數，return中只能包含一個頂層標簽，我們一般用div來包裹。且組件名稱應該大寫開頭。
4.refs的屬性可以幫助我們突破虛擬DOM的限制，可以獲取到DOM結構，但是不要使用中文網上的類似:this.refs.xxx.getDOMNode()，因為這樣的寫法已經不被支持。
this.refs.XXX的寫法是用來獲取react結構的。
我們應該使用react-dom提供的專門操作DOM的方法：ReactDOM.findDOMNode(this.refs.XXX)。
this.refs.XXX與ReactDOM.findDOMNode(this.refs.XXX)是不同的，雖然有時候我們打印出來的有時會相同。
5.當然，react最核心的就是一個狀態機。getInitialState(只會在組件初始化的時候調用一次)就是用來初始化狀態的，我們可以通過this.setState()來修改狀態。狀態的每次修改都會出發render函數。
6.getDefaultProps這個函數可以幫助我們設置一個不變的數據結構，以便取用。相當於定義了一個常量。
7.statics就是用來頂一個靜態方法的，我們可以定義各種函數，並通過ComponentDemo. getBusinessName()方式來調用。結構:組件名.函數名
8.最重要的事件機制也是存在的，就像例子中的onClick，大部門事件機制都是支持的。
9.componentDidMount(只會在組件渲染結束后調用一次)這個函數就是跟組件的生命周期相關了。我們一般在里面會進行異步的請求之類的操作。
componentWillMount(只會在組件執行初始化渲染之前調用一次)剛好跟上面的相反。
還有其他的幾個，個人理解為組件進入，開始，離開的鈎子。
shouldComponentUpdate(object nextProps,boject nextState) (在函數有新的props或state的時候觸發)這個鈎子會主要管理組件是否更新的，返回的是個布爾值。默認是true，一般不建議使用。
10.組件肯定也少不了css的潤色。但是這里添加style必須以對象的形式寫，如果是數字的話，默認單位是px。
其他的屬性必須用駝峰格式：style={{ backgroundColor:'red' }}；
class必須寫成className。
11.isMounted()是用來判斷組件是否已經插入DOM。一般請求后強烈建議在判斷是否插入DOM后，再來修改state。
絕對不要直接改變
this.state，因為在之后調用setState()可能會替換掉你做的更改。把this.state當做不可變的。
setState()不會立刻改變this.state，而是創建一個即將處理的 state 轉變。在調用該方法之后獲取this.state的值可能會得到現有的值，而不是最新設置的值。不保證
setState()調用的同步性，為了提升性能，可能會批量執行 state 轉變和 DOM 渲染。
setState()將總是觸發一次重繪，除非在shouldComponentUpdate()中實現了條件渲染邏輯。如果使用可變的對象，但是又不能在shouldComponentUpdate()中實現這種邏輯，僅在新 state 和之前的 state 存在差異的時候調用setState()可以避免不必要的重新渲染。
以上僅屬於個人愚見，如果錯處，歡迎指出！