- 組件的三個(gè)生命周期狀態(tài):
Mount：插入真實(shí) DOM
Update：被重新渲染
Unmount：被移出真實(shí) DOM
- 生命周期流程:
- 第一次初始化顯示: ReactDOM.render(<Xxx/>, containDom)
constructor()
componentWillMount() : 將要插入回調(diào)
render() : 用于插入虛擬DOM回調(diào)
componentDidMount() : 已經(jīng)插入回調(diào)
- 每次更新state: this.setState({})
componentWillReceiveProps(): 接收父組件新的屬性
componentWillUpdate() : 將要更新回調(diào)
render() : 更新(重新渲染)
componentDidUpdate() : 已經(jīng)更新回調(diào)
- 刪除組件: ReactDOM.unmountComponentAtNode(div): 移除組件
componentWillUnmount() : 組件將要被移除回調(diào)
- 常用的方法
render(): 必須重寫, 返回一個(gè)自定義的虛擬DOM
constructor(): 初始化狀態(tài), 綁定this(可以箭頭函數(shù)代替)
componentDidMount() : 只執(zhí)行一次, 已經(jīng)在dom樹中, 適合啟動(dòng)/設(shè)置一些監(jiān)聽(tīng)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10_ComponentLife</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
/*
需求: 自定義組件
1. 讓指定的文本做顯示/隱藏的動(dòng)畫
2. 切換時(shí)間為2S
3. 點(diǎn)擊按鈕從界面中移除組件界面
*/
class Fade extends React.Component {
constructor (props) {
super(props)
console.log('constructor(): 創(chuàng)建組件對(duì)象')
this.state = {
opacity: 1
}
this.removeComponent = this.removeComponent.bind(this)
}
componentWillMount () {
console.log('componentWillMount(): 初始化將要掛載')
}
componentDidMount () {// 在此方法中啟動(dòng)定時(shí)器/綁定監(jiān)聽(tīng)/發(fā)送ajax請(qǐng)求
console.log('componentDidMount(): 初始化已經(jīng)掛載')
// 保存到當(dāng)前組件對(duì)象中
this.intervalId = setInterval(function () {
console.log('--------')
// 得到當(dāng)前opacity
let {opacity} = this.state
// 更新opacity
opacity -= 0.1
if(opacity<=0) {
opacity = 1
}
// 更新?tīng)顟B(tài)
this.setState({opacity})
}.bind(this), 200)
}
componentWillUpdate () {
console.log('componentWillUpdate(): 將要更新')
}
componentDidUpdate () {
console.log('componentDidUpdate(): 已經(jīng)更新')
}
componentWillUnmount () {// 清除定時(shí)器/解除監(jiān)聽(tīng)
console.log('componentWillUnmount(): 將要被移除')
clearInterval(this.intervalId)
}
removeComponent () {
ReactDOM.unmountComponentAtNode(document.getElementById('example'))
}
render() {
console.log('render() 渲染組件')
return (
<div>
<h2 style={{opacity:this.state.opacity}}>{this.props.content}</h2>
<button onClick={this.removeComponent}>不活了</button>
</div>
)
}
}
ReactDOM.render(<Fade content="react學(xué)不會(huì), 怎么辦?"/>, document.getElementById('example'))
</script>
</body>
</html>
