1猾警，自定義組件（Component）

????????1）react的核心語法和概念? ?????調(diào)試工具安裝

????????2）作用類似于angular中自定義標(biāo)簽指令

????????3）組件的2個基本概念

? ????????????????組件類（工廠函數(shù)/構(gòu)造函數(shù)/類）：MyComponent

? ? ? ? ? ? ? ? ? 組件標(biāo)簽：<MyComponent/>

????????4）定義組件類

????????????????????方法1 ：工廠（無狀態(tài)）函數(shù)

????????????????????function MyComponent1（）{

????????????????????? ? return? ?<h1>自定義組件標(biāo)題</h1>

????????????????????}

????????????????????方式2 ：ES6類語法（復(fù)雜組件，推薦使用）

????????????????????class MyComponent2? extends React.Component{

? ? ????????????????????render(){

? ? ????????????????????????return <h1>自定義組件標(biāo)題</h1>

? ? ? ? ? ? ? ? ? ? ? ? }

????????????????????}

????????????????????方式3 ： ES5老語法

????????????????????var MyComponent3 = React.createClass({

? ? ????????????????????render(){

? ? ? ????????????????????? return <h1>自定義組件標(biāo)題</h1>；

????????????????????????}

????????????????????});

????????5）渲染組件標(biāo)簽

????????????????ReactDom.render(<MyComponent/>,document.getElementById（‘example’）)炎疆；

????????????????注意：

????????????????????1返回的組件類必須首字母大寫

????????????????????2?虛擬DOM元素必須只有一個根元素

????????????????????3虛擬DOM元素必須有結(jié)束標(biāo)簽

? ? ? ? 6)? ReactDom.render（）渲染組件標(biāo)簽的基本流程

????????????????1 React內(nèi)部會創(chuàng)建組件實例對象

????????????????2 得到包含的虛擬DOM并解析為真實DOM

????????????????3 插入到指定頁面元素內(nèi)部

2，組件3大屬性之一：props屬性

????1）每個組件對象都會有props（properties的簡寫）屬性

? ? 2）?組件標(biāo)簽的所有屬性都會保存在props中

? ? 3）?內(nèi)部讀取某個屬性值：?this.props.propertyName

? ? 4)? ?作用：通過標(biāo)簽屬性從組件外向組件內(nèi)傳遞數(shù)據(jù)（只讀）

? ? 5）?對props中的屬性值進(jìn)行類型限制和必要性限制?使用 PropTypes 進(jìn)行類型檢控制臺報錯解決措施????

????????????Person.propTypes = {

? ? ????????????name: React.PropTypes.string.isRequired,

? ? ????????????age:? ?React.PropTypes.number.isRequired

????????????}

? ? 6)?擴展屬性：將對象的所有屬性通過props傳遞

? ? ????????<Person? {...person} />

? ? 7)?默認(rèn)屬性值

? ? ????????Person.defaultPros = {

? ? ? ? ????????????name : "帥明"

? ? ? ? ? ? ? }

? ? 8）組件類的構(gòu)造函數(shù)

? ? ????????????constructor（props）{

????????????????????super（props）国裳；

????????????????????console.log(props); //查看所有屬性

????????????????}

????????super關(guān)鍵字形入，它指代父類的實例（即父類的this對象）。子類必須在constructor方法中調(diào)用super方法缝左，否則新建實例時會報錯亿遂。這是因為子類沒有自己的this對象，而是繼承父類的this對象渺杉，然后對其進(jìn)行加工蛇数。如果不調(diào)用super方法，子類就得不到this對象是越。

????????ES6的繼承機制耳舅，實質(zhì)是先創(chuàng)造父類的實例對象this（所以必須先調(diào)用super方法），然后再用子類的構(gòu)造函數(shù)修改this倚评。