1. 組件

1. 函數(shù)式組件（適用于【簡(jiǎn)單組件】的定義）
   示例：
   

執(zhí)行了ReactDOM.render(<MyComponent/>, ...)之后執(zhí)行了什么？

1. React解析組件標(biāo)簽，找到了MyComponent組件
2. 發(fā)現(xiàn)組件是使用函數(shù)定義的，隨后調(diào)用該函數(shù)，將返回的虛擬DOM轉(zhuǎn)為真實(shí)DOM，隨后呈現(xiàn)在頁(yè)面中

2. 類組件（適用于【復(fù)雜組件】的定義）
   示例：
   

執(zhí)行了ReactDOM.render(, …)之后執(zhí)行了什么？

1. React解析組件標(biāo)簽，找到了MyComponent組件
2. 發(fā)現(xiàn)組件是使用類定義的，隨后new出來(lái)該類的實(shí)例，并通過(guò)該實(shí)例調(diào)用到原型上的render方法。
3. 將render返回的虛擬DOM轉(zhuǎn)為真實(shí)DOM，隨后呈現(xiàn)在頁(yè)面中

2. 組件三大核心屬性1：state（類組件）

1. 理解

1. state是組件對(duì)象最重要的屬性，值是對(duì)象（可以包含多個(gè)key:value組合）
2. 組件被稱為’狀態(tài)機(jī)’，通過(guò)更新組件的state來(lái)更新對(duì)應(yīng)的頁(yè)面顯示（重新渲染組件）

2. 強(qiáng)烈注意

1. 組件中render方法中的this為組件實(shí)例對(duì)象
2. 組件自定義的方法中this為undefined，如何解決？
   1. 強(qiáng)制綁定this：通過(guò)函數(shù)對(duì)象的bind()，如下示例
   2. 箭頭函數(shù)：見(jiàn)下方事件示例
3. 狀態(tài)數(shù)據(jù)，不能直接修改或更新,必須用setState,且更新是一種合并，不是替換

我們還要多考慮一個(gè)問(wèn)題：組件內(nèi)渲染的次數(shù)

1. constructor： 構(gòu)造器調(diào)用幾次？ —— 1次
2. render： 調(diào)用幾次？ —— 1+n 次 1是初始化的那次，n是狀態(tài)更新的次數(shù)
3. changeWeather事件：調(diào)用幾次？—— 點(diǎn)幾次，調(diào)用幾次

示例：

當(dāng)然，我們有簡(jiǎn)寫

3. 組件三大核心屬性2：props

1. 每個(gè)組件對(duì)象都會(huì)有props(properties的簡(jiǎn)寫)屬性
2. 組件標(biāo)簽的所有屬性都保存在props中
   如圖：

1. 作用

1. 通過(guò)標(biāo)簽屬性從組件外向組件內(nèi)傳遞變化的數(shù)據(jù)
2. 注意：組件內(nèi)部不要修改props數(shù)據(jù)
   示例：
   

2. 編碼操作

1. 內(nèi)部讀取某個(gè)屬性值this.props.name
2. 對(duì)props中的屬性值進(jìn)行類型限制和必要性限制

<!-- 需要先引入prop-types.js對(duì)props傳入的值進(jìn)行限制 -->
<script src="../js/prop-types.js"></script>Person.propTypes = {name: PropTypes.string.isRequiredage: PropTypes.number
}

3. 擴(kuò)展屬性： 將對(duì)象的所以屬性通過(guò)props傳遞<MyPerson {...per} />
4. 默認(rèn)屬性值

Person.defaultProps = {sex: '男',age: 15
}

示例：

5. 組件類的構(gòu)造函數(shù)(其實(shí)這函數(shù)可寫可不寫，因?yàn)槟壳皝?lái)說(shuō)，沒(méi)必要)

constructor(props) {super(props)console.log(props) // 打印所有屬性
}

看一個(gè)實(shí)例：

因?yàn)檫@個(gè)屬性的限制是加在類身上的嘛，所以給他定義成靜態(tài)屬性，放在類內(nèi)部，提升便捷性，就不把他放在類外部了，否則，類名一換，欲哭無(wú)淚
所以函數(shù)組件內(nèi)部還是只能在外部添加，這么看來(lái)，類組件還是很好的。但是后面隨著hooks的到來(lái)，函數(shù)組件成為主流，那么如何對(duì)props進(jìn)行限制就另外探究了：（下圖附函數(shù)組件限制props）

4. 組件三大核心屬性2：ref與事件處理

1. 理解

組件內(nèi)的標(biāo)簽可以定義ref屬性來(lái)標(biāo)識(shí)自己

2. 編碼

1. 字符串形式的ref： <input ref="input1" />（最簡(jiǎn)單但不推薦）
   示例
   

2. 回調(diào)形式的ref：<input ref={(c) => this.input1 = c} />（也還不錯(cuò)）
   如圖：
   

3. createRef創(chuàng)建ref容器：（推薦）

myRef = React.createRef()
<input ref={this.myRef} />

如圖：

3. 事件處理

1. 通過(guò)onXxx屬性指定事件處理函數(shù)（注意大小寫）
   • React使用的使自定義（合成）事件，而不是使用的原生DOM事件——為了更好的兼容性
   • React中的事件是通過(guò)事件委托方式處理的（委托給最外層的元素）——為了高效
2. 通過(guò)event.target得到發(fā)生事件的DOM元素對(duì)象——不要過(guò)度使用ref

針對(duì)使用箭頭函數(shù)說(shuō)明一下：
組件內(nèi)的自定義事件放在哪里？ —— Demo類的原型對(duì)象上，供實(shí)例使用
eq1: 由于自定義事件是作為onClick的回調(diào)，所以不是通過(guò)實(shí)例調(diào)用的，是直接調(diào)用
類的方法默認(rèn)開(kāi)啟了局部嚴(yán)格模式，所以自定義事件中的this為undefined
可以打印this試一試
那我們?nèi)绾谓鉀Q呢：
1. bind強(qiáng)制改變，看上述state的示例
2. 箭頭函數(shù)
示例：