React组件的生命周期，主要分为挂载、更新以及移除阶段的生命周期。所谓挂载指的是组件从初始化到渲染到页面的过程。卸载指的是组件生成的DOM元素从页面中删除的过程。更新指的是组件更新的过程。那么在这些过程当中它都经历了些什么呢？
首先来一段代码：
ReactDOM.render(
<Book/>
document.querySelector("#wrap")
)
其实以上代码在经过React.js的编译后会变成这个样子：
ReactDOM.render(
// <Book/>,
React.createElement(Book),
document.querySelector("#wrap")
)
也就是说将Book传给了React.createElement函数，又将该函数的结果返回给了ReactDOM.rende。最后将组件挂载到了id为wrap的元素中！我们也可以大胆的猜测一下在这个过程中它都做了些什么事：
// React.createElement 中实例化一个 Book
const book = new Book(props, children)
// React.createElement 中调用 book.render 方法渲染组件的内容
const bookJsxObject = book.render()
// ReactDOM 用渲染后的 JavaScript 对象来来构建真正的 DOM 元素
const bookDOM = createDOMFromObject(bookJsxObject)
// ReactDOM 把 DOM 元素塞到页面上
document.querySelector("#wrap").innerHTML=bookDOM;
以上代码也可以简单理解为：
// 实例化组件，也就是构造DOM元素
constructor();
// 将构造的元素插入到指定的页面元素中
render();
不过在挂载的过程当中，其实还有两个方法，分别为componentWillMount 和 componentDidMount。
// 实例化组件，也就是构造DOM元素
constructor();
// 当DOM元素载入之前调用
componentWillMount();
// 将构造的元素插入到指定的页面元素中
render();
// 当DOM元素载入页面之后调用
componentDidMount();
componentWillMount方法在组件挂载到页面之前调用。而componentDidMount方法是在挂载到页面以后调用。我们也可以将这两个方法放到组件内部：
class Book extends React.Component{
constructor(){
super();
console.log("执行constructor");
}
componentWillMount(){
console.log("执行componentWillmount");
}
componentDidMount(){
console.log("执行componentDidMount");
}
render(){
console.log("执行render");
return (
<div>大家好，我叫张培跃</div>
)
}
}
ReactDOM.render(
<Book/>,
document.querySelector("#wrap")
)
通过以上示例的输出结果，我们也可以看到方法的执行顺序：
->执行constructor
->执行componentWillmount
->执行render
->执行componentDidMount
componentWillmount在render之前，componentDidMount在render之后
接下来咱们再来思考一个问题，我们既然可以将组件挂载到页面中，自然也可以将组件在页面中进行卸载。而当组件卸载之前会调用组件的componentWillUnmount方法:
// 实例化组件，也就是构造DOM元素
constructor();
// 当DOM元素载入之前调用
componentWillMount();
// 将构造的元素插入到指定的页面元素中
render();
// 当DOM元素载入页面之后调用
componentDidMount();
// 当从页面中卸载时会调用
componentWillUnmount()
接下来，我们再来定义一个组件，让该组件控制对Book组件的挂载与卸载：
class My extends React.Component{
constructor(){
super();
this.state={
isShow:true
};
this.changeIsShow=this.changeIsShow.bind(this);
}
changeIsShow(){
this.setState({
isShow:!this.state.isShow
})
}
render(){
return (
<div>
<input type="button" value="点我啊"
onClick={this.changeIsShow}/>
{/*根据isShow来对Book进行挂载与卸载*/}
{this.state.isShow?<Book />:null}
</div>
)
}
}
ReactDOM.render(
<My/>,
document.querySelector("#wrap")
)
然后在在Book组件中增加componentWillUnmount方法：
class Book extends React.Component{
constructor(){
super();
console.log("执行constructor");
}
componentWillMount(){
console.log("执行componentWillmount");
}
componentDidMount(){
console.log("执行componentDidMount");
}
componentWillUnmount(){
console.log("执行componentWillUnmount");
}
render(){
console.log("执行render");
return (
<div>大家好，我叫张培跃</div>
)
}
}
当点击按钮时控制台会输出最后一行，说明componentWillUnmount方法在被卸载时调用了：
->执行constructor
->执行componentWillmount
->执行render
->执行componentDidMount
完整示例代码：
class Book extends React.Component{
constructor(){
super();
console.log("执行constructor");
}
componentWillMount(){
console.log("执行componentWillmount");
}
componentDidMount(){
console.log("执行componentDidMount");
}
componentWillUnmount(){
console.log("执行componentWillUnmount");
}
render(){
console.log("执行render");
return (
<div>大家好，我叫张培跃</div>
)
}
}
class My extends React.Component{
constructor(){
super();
this.state={
isShow:true
};
this.changeIsShow=this.changeIsShow.bind(this);
}
changeIsShow(){
this.setState({
isShow:!this.state.isShow
})
}
render(){
return (
<div>
<input type="button" value="点我啊"
onClick={this.changeIsShow}/>
{/*根据isShow来对Book进行挂载与卸载*/}
{this.state.isShow?<Book />:null}
</div>
)
}
}
ReactDOM.render(
<My/>,
document.querySelector("#wrap")
)
到目前为止，咱们已经见证了组件从出生到死亡的一个过程！接下来我们一起通过一个计数器的实例来了解这些函数的作用！
现在我们要完成一个倒计时的小应用，如下：
首先通过constructor进行初始化：
class AddOne extends React.Component{
constructor(){
super();
//设置初始值
this.state={
num:0,
timer:null
}
}
componentWillMount(){
// 组件挂载时添加计数器
this.timer=setInterval(()=>{
this.setState({
num:this.state.num+1
})
},1000)
}
componentWillUnmount(){
// 组件卸载时移除计数器
clearInterval(this.timer);
}
render(){
return (
<div>
<h1>{this.state.num}</h1>
</div>
)
}
}
class Start extends React.Component{
constructor(){
super();
this.state={
isShow:false
};
this.changeIsShow=this.changeIsShow.bind(this);
}
changeIsShow(){
this.setState({
isShow:!this.state.isShow
})
}
render(){
return (
<div>
<input type="button" value={this.state.isShow?"结束":"开始计时"} onClick={this.changeIsShow}/>
{this.state.isShow?<AddOne />:null}
</div>
);
}
}
ReactDOM.render(
<Start/>,
document.querySelector("#wrap")
)
小结一下：
- componentWillMount：在组件调用 render 方法之前调用。
- componentDidMount：是 DOM 元素已经插入页面后调用。
- componentWillUnmount：组件对应的 DOM 元素从页面中卸载之前调用。
未完，等续
网友评论