1.基本理解與使用
1.1自定義組件
-
1>定義組件（2 種方式）
/*方式1: 工廠函數(shù)組件(簡單組件)*/
function MyComponent () {
return <h2>工廠函數(shù)組件(簡單組件)</h2>
}
/*方式2: ES6類組件(復(fù)雜組件)*/
class MyComponent2 extends React.Component {
render () {
console.log(this) // MyComponent2的實(shí)例對(duì)象
return <h2>ES6類組件(復(fù)雜組件)</h2>
}
- 2> 渲染組件標(biāo)簽
ReactDOM.render(<MyComponent/>,document.getElementById('example1'))
ReactDOM.render(<MyComponent2/>,document.getElementById('example2'))
效果：
image.png
注意：
- 組件名首字母必須大寫
- 虛擬 DOM 元素只能有一個(gè)根元素
- 虛擬 DOM 元素必須有結(jié)束標(biāo)簽
2.組件的三大屬性
一、state
理解：
- state是組件對(duì)象最重要的屬性, 值是對(duì)象(可以包含多個(gè)數(shù)據(jù))
- 組件被稱為"狀態(tài)機(jī)", 通過更新組件的state來更新對(duì)應(yīng)的頁面顯示(重新渲染組件)
編碼操作:
- 初始化狀態(tài):
constructor (props) {
super(props)
this.state = {
stateProp1 : value1,
stateProp2 : value2
}
}
- 讀取某個(gè)狀態(tài)值
this.state.statePropertyName
- 更新狀態(tài)---->組件界面更新
this.setState({
stateProp1 : value1,
stateProp2 : value2
})
二元镀、props
理解：
- 每個(gè)組件對(duì)象都會(huì)有props(properties的簡寫)屬性
- 組件標(biāo)簽的所有屬性都保存在props中
編碼操作：
- 內(nèi)部讀取某個(gè)屬性值
this.props.propertyName
- 對(duì) props 中的屬性值進(jìn)行類型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
- 擴(kuò)展屬性: 將對(duì)象的所有屬性通過props傳遞
<Person {...person}/>
// ...作用：
// 1.打包
// function fn(...as){} fn(1,2,3)
// 2.解包
// const arr1=[1,2,3] const arr2=[6,...arr1,9]
- 默認(rèn)屬性值
Person.defaultProps = {
name: 'Mary'
}
- 組件類的構(gòu)造函數(shù)
constructor (props) {
super(props)
console.log(props) // 查看所有屬性
}
面試題
問題: 請(qǐng)區(qū)別一下組件的 props 和 state 屬性
- state: 組件自身內(nèi)部可變化的數(shù)據(jù)
- props: 從組件外部向組件內(nèi)部傳遞數(shù)據(jù), 組件內(nèi)部只讀不修改
三椒楣、refs
理解：
- 1.組件內(nèi)的標(biāo)簽都可以定義 ref 屬性來標(biāo)識(shí)自己
<input type="text" ref={input=>this.input=input}/>
2.在組件中可以通過 this.input 來得到對(duì)應(yīng)的真實(shí) DOM 元素
3.作用：通過 ref 獲取組件內(nèi)容特定標(biāo)簽對(duì)象螺垢，進(jìn)行讀取其相關(guān)數(shù)據(jù)
事件處理：
- 通過 onXxx 屬性指定組件的事件處理函數(shù)(注意大小寫)
a. React使用的是自定義(合成)事件, 而不是使用的原生DOM事件
b. React中的事件是通過事件委托方式處理的(委托給組件最外層的元素)
- 通過 event.target 得到發(fā)生事件的DOM元素對(duì)象
<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //返回input對(duì)象
}
3.組件的組合
組件化編寫功能流程:
1.拆分組件
2.實(shí)現(xiàn)靜態(tài)組件（只有靜態(tài)界面，沒有動(dòng)態(tài)數(shù)據(jù)和交互）
-
3.實(shí)現(xiàn)動(dòng)態(tài)組件
a. 實(shí)現(xiàn)初始化數(shù)據(jù)動(dòng)態(tài)顯示
b. 實(shí)現(xiàn)交互功能
4.收集表單數(shù)據(jù)
-
1) 問題: 在react應(yīng)用中, 如何收集表單輸入數(shù)據(jù)
-
2) 包含表單的組件分類
a. 受控組件: 表單項(xiàng)輸入數(shù)據(jù)能自動(dòng)收集成狀態(tài)
handleChange(event){
//讀取輸入的值
const pwd=event.target.value
//更新 pwd 的狀態(tài)
this.setState({pwd})
}
<input type=
b. 非受控組件: 需要時(shí)才手動(dòng)讀取表單輸入框中的數(shù)據(jù)
<input type="text" ref={input=>this.nameinput=input}/>
"password" value={this.state.pwd} onChange={this.handleChange} />
阻止事件的默認(rèn)行為：
event.preventDefault()
5.組件生命周期
5.1 生命周期詳述
1) 組件的三個(gè)生命周期狀態(tài):
* Mount：插入真實(shí) DOM
* Update：被重新渲染
* Unmount：被移出真實(shí) DOM
2) React 為每個(gè)狀態(tài)都提供了勾子(hook)函數(shù)
* componentWillMount()
* componentDidMount()
* componentWillUpdate()
* componentDidUpdate()
* componentWillUnmount()
3) 生命周期流程:
a. 第一次初始化渲染顯示: ReactDOM.render()
* constructor(): 創(chuàng)建對(duì)象初始化state
* componentWillMount() : 將要插入回調(diào)
* render() : 用于插入虛擬DOM回調(diào)
* componentDidMount() : 已經(jīng)插入回調(diào)
b. 每次更新state: this.setSate()
* componentWillUpdate() : 將要更新回調(diào)
* render() : 更新(重新渲染)
* componentDidUpdate() : 已經(jīng)更新回調(diào)
c. 移除組件: ReactDOM.unmountComponentAtNode(containerDom)
* componentWillUnmount() : 組件將要被移除回調(diào)
5.2 重要的勾子
- render(): 初始化渲染或更新渲染調(diào)用
- componentDidMount(): 開啟監(jiān)聽, 發(fā)送ajax請(qǐng)求
- componentWillUnmount(): 做一些收尾工作, 如: 清理定時(shí)器
- componentWillReceiveProps(): 后面需要時(shí)講
