結合最近對react專案優化的同時，對一些第一次看來感覺很容易，但是使用上容易搞混淆的東西再學習和整理一番。由於是老專案，主要採用的是react.createelement的方式來使用。
關於react.createelement
string/reactclass type,
[object props],
[children ...]
) 第乙個引數：必填，元素型別
第二個引數：可填，元素屬性
第三個引數：可填，元素子節點
var child1 = react.createelement('li', null, 'first text content');
var child2 = react.createelement('li', null, 'second text content');
var child3 = react.createelement('li', null, 'third text content');
var root = react.createelement('ul', , child1, child2, child3);
等價var root = react.createelement('ul', , [child1, child2, child3]);
reactdom.render(
root,
document.getelementbyid('content')
);
函式式定義的無狀態元件
es5原生方式react.createclass定義的元件
es6形式的extends react.component定義的元件
上面的屬於es5原生方式react.createclass定義的元件。
函式式定義的無狀態元件建立無狀態函式式元件形式是從
react 0.14版本開始出現的。
無狀態函式式元件形式上表現為乙個只帶有乙個render方法的元件類，通過函式形式或者es6 arrow function的形式在建立，並且該元件是無state狀態的。具體的建立形式如下：
function hellocomponent(props, /* context */)
} reactdom.render(, mountnode)
它是為了建立純展示元件，這種元件只負責根據傳入的props來展示，不涉及到要state狀態的操作。具體的無狀態函式式元件.
1,元件不會被例項化，整體渲染效能得到提公升2,元件不能訪問this物件
3,元件無法訪問生命週期的方法
4,無狀態元件只能訪問輸入的props，同樣的props會得到同樣的渲染結果，不會有***
es6形式的extends react.component定義的元件react.component是以es6的形式來建立react的元件的，是react目前極為推薦的建立有狀態元件的方式，最終會取代react.createclass形式；
`class inputcontroles6 extends react.component ;
// es6 類中函式必須手動繫結
this.handlechange = this.handlechange.bind(this);
}handlechange(event) );
}render() }
`
react.createclass與react.component區別
react.createclass建立的元件，其每乙個成員函式的this都有react自動繫結，任何時候使用，直接使用this.method即可，函式中的this會被正確設定。
const contacts = react.createclass(,
render()
});
react.component建立的元件，其成員函式不會自動繫結this，需要開發者手動繫結，否則this不能獲取當前元件例項物件。
class contacts extends react.component
handleclick()
render()
react.component有三種手動繫結方法：可以在建構函式中完成繫結，也可以在呼叫時使用method.bind(this)來完成繫結，還可以使用arrow function來繫結。拿上例的handleclick函式來說，其繫結可以有：
constructor(props)
//使用bind來繫結
this.handleclick()}>
//使用arrow function來繫結
react.createclass在建立元件時，有關元件props的屬性型別及元件預設的屬性會作為元件例項的屬性來配置，其中defaultprops是使用getdefaultprops的方法來獲取預設元件屬性的
const todoitem = react.createclass(,
getdefaultprops()
}render()
})
react.component在建立元件時配置這兩個對應資訊時，他們是作為元件類的屬性，不是元件例項的屬性，也就是所謂的類的靜態屬性來配置的。對應上面配置如下：
class todoitem extends react.component ;
static defaultprops = ;
...}
react.createclass建立的元件，其狀態state是通過getinitialstate方法來配置元件相關的狀態；
react.component建立的元件，其狀態state是在constructor中像初始化元件屬性一樣宣告的。
const todoitem = react.createclass(
}render()
})
class todoitem extends react.component
}render()
}
mixins(混入)是物件導向程式設計oop的一種實現，其作用是為了復用共有的**，將共有的**通過抽取為乙個物件，然後通過mixins進該物件來達到**復用。具體可以參考react mixin的前世今生。
react.createclass在建立元件時可以使用mixins屬性，以陣列的形式來混合類的集合。
var somemixin =
};const contacts = react.createclass(,
render()
});
react.component這種形式並不支援mixins，至今react團隊還沒有給出乙個該形式下的官方解決方案；但是react開發者社群提供乙個全新的方式來取代mixins,那就是higher-order components
higher-order components通過函式向現有元件類新增邏輯，就是高階元件。
讓我們先來看乙個可能是史上最無聊的高階元件：
return function(comp) = this.props;
return ()}
}}}
const withoutid = noid()(comp);
之所以稱之為高階，是因為在react中，這種巢狀關係會反映到元件樹上，層層巢狀就好像高階函式的function in function一樣.
補充一點無狀態元件內部其實是可以使用ref功能的，雖然不能通過this.refs訪問到，但是可以通過將ref內容儲存到無狀態元件內部的乙個本地變數中獲取到。
例如下面這段**可以使用ref來獲取元件掛載到dom中後所指向的dom元素：
function testcomp(props)>
...)
}參考：
react 的高階元件（基礎篇）
乙個高階元件只是乙個包裝了另外乙個 react 元件的react 元件。這種形式通常實現為乙個函式，本質上是乙個類工廠 class factory 它下方的函式標籤偽 啟發自 haskell hocfactory w react.component e react.component定義中的 包裝 ...
React高階元件
想想以前用原生和jquery的專案，上千行的code映入眼簾，瞬間有種昏死過去的衝動。難以維護，改乙個bug可能出現n個bug，真的是很痛苦。於是乎元件化成為了當前前端開發的主流技術。angular vue和react很好的幫我們實現了元件化。但是我們常常也會遇到一種情況，就是兩個元件往往有很多的重...
react高階元件
基本概念 函式可以作為引數被傳遞 函式可以作為返回值輸出 元件作為引數被傳遞，返回值是乙個元件 高階元件是乙個函式 案例 將a元件作為公共元件，bc元件作為a函式的引數，來共享顯示a元件 此處紅框是a元件，紅框裡左邊內容為b元件，右邊內容為c元件 1.建立公共的a元件 將元件a封裝成乙個函式，接收乙...