1. 組件

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

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

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

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

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

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

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

1. 理解

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

2. 強烈注意

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

我們還要多考慮一個問題：組件內(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ào)用幾次

示例：

當然，我們有簡寫

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

1. 每個組件對象都會有props(properties的簡寫)屬性
2. 組件標簽的所有屬性都保存在props中
   如圖：

1. 作用

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

2. 編碼操作

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

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

3. 擴展屬性： 將對象的所以屬性通過props傳遞<MyPerson {...per} />
4. 默認屬性值

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

示例：

5. 組件類的構(gòu)造函數(shù)(其實這函數(shù)可寫可不寫，因為目前來說，沒必要)

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

看一個實例：

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

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

1. 理解

組件內(nèi)的標簽可以定義ref屬性來標識自己

2. 編碼

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

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

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

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

如圖：

3. 事件處理

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

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