react学习记录-挂载阶段的组件生命周期
文章目录
- 挂载阶段的组件生命周期
- constructor()、componentWillMount()、componentDidMount()
- componentWillUnmount()
- 各个生命周期函数的具体使用场合
- 课后习题
挂载阶段的组件生命周期
之前提到过我们定义的组件实际上等价于React.createElement 函数，它会将返回结果传给 ReactDOM.render。过程如下：
// 我们把 React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。每个组件都会经过初始化 -> 挂载到页面上 这个过程。
可以理解一个组件的方法调用是这么一个过程：
-> constructor()
-> render()
// 然后构造 DOM 元素插入页面
constructor()、componentWillMount()、componentDidMount()
React.js 为了让我们能够更好的掌控组件的挂载过程，往上面插入了两个方法。在创建组件实例并将其插入DOM时，将按以下顺序调用这些方法：
constructor()static getDerivedStateFromProps()// 旧版生命周期使用的是 componentWillMount()render()- 然后构造 DOM 元素插入页面
componentDidMount()
这里我们默认还是使用 componentWillMount，并编写一段Header组件：
class Header extends Component {
constructor () {
super()
console.log('construct')
}
componentWillMount () {
console.log('component will mount')
}
componentDidMount () {
console.log('component did mount')
}
render () {
console.log('render')
return (
<div>
<h1 className='title'>React 小书</h1>
</div>
)
}
}
我们可以在控制台看到它们按照挂载过程被先后打印（严格模式下constructor和render会执行两次）。
componentWillUnmount()
有挂载，也就有删除：
-> constructor()
-> componentWillMount()
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()
// ...
// 即将从页面中删除
-> componentWillUnmount()
// 从页面中删除
我们可以用下面的例子来演示组件的unmount，点击按钮，隐藏Header组件时，就会打印卸载：
class Header extends Component {
...
componentWillUnmount() {
console.log('component will unmount')
}
...
}
class Index extends Component {
constructor() {
super()
this.state = {
isShowHeader: true
}
}
handleShowOrHide () {
this.setState({
isShowHeader: !this.state.isShowHeader
})
}
render () {
return (
<div>
{this.state.isShowHeader ? <Header /> : null}
<button onClick={this.handleShowOrHide.bind(this)}>
显示或者隐藏标题
</button>
</div>
)
}
}
ReactDOM.render(
<Index />,
document.getElementById('root')
)
各个生命周期函数的具体使用场合
我们来讨论一下上面提到的四个组件生命周期函数constructor 、componentWillMount、componentDidMount、componentWillUnmount，它们贯穿了组件的出生到死亡，以一个时钟应用为例子，来丰富这四个生命周期函数。
首先，state的初始化是在constructor 中完成的，如下：
class Clock extends Component {
constructor () {
super()
this.state = {
date: new Date()
}
}
render () {
return (
<div>
<h1>
<p>现在的时间是</p>
{this.state.date.toLocaleTimeString()}
</h1>
</div>
)
}
}
一些组件启动的操作，比如说 Ajax 数据的拉取操作、一些定时器的启动等，就可以放在 componentWillMount 里面进行，例如 Ajax：
...
componentWillMount () {
ajax.get('http://json-api.com/user', (userData) => {
this.setState({ userData })
})
}
...
当然在我们这个例子里面是定时器的启动，我们给 Clock 启动定时器：
class Clock extends Component {
constructor () {
super()
this.state = {
date: new Date()
}
}
componentWillMount () {
this.timer = setInterval(() => {
this.setState({ date: new Date() })
}, 1000)
}
...
}
现在每隔一秒，闹钟的时间就会更新，现在让Index组件去使用Clock组件，并插入页面。我们再增加一个按钮，去使得时钟可以隐藏或者显示：
class Index extends Component {
constructor () {
super()
this.state = { isShowClock: true }
}
handleShowOrHide () {
this.setState({
isShowClock: !this.state.isShowClock
})
}
render () {
return (
<div>
{this.state.isShowClock ? <Clock /> : null }
<button onClick={this.handleShowOrHide.bind(this)}>
显示或隐藏时钟
</button>
</div>
)
}
}
当我们选择隐藏闹钟组件时，会出现一个情况：
这是因为我们没有在闹钟隐藏之后消除定时器。时钟隐藏的时候，定时器的回调函数还在不停地尝试 setState，由于 setState 只能在已经挂载或者正在挂载的组件上调用，所以 React.js 开始疯狂报错。
多次的隐藏和显示会让 React.js 重新构造和销毁 Clock 组件，每次构造都会重新构建一个定时器。而销毁组件的时候没有清除定时器，所以你看到报错会越来越多。而且因为 JavaScript 的闭包特性，这样会导致严重的内存泄漏。
这时候componentWillUnmount 就可以派上用场了，它的作用就是在组件销毁的时候，做这种清场的工作。
...
componentWillUnmount () {
clearInterval(this.timer)
}
...
这时候就没有错误了。
至于 componentDidMount ，一般来说，有些组件的启动工作是依赖 DOM 的，例如动画的启动，而 componentWillMount 的时候组件还没挂载完成，所以没法进行这些启动工作，这时候就可以把这些操作放在 componentDidMount 当中。
课后习题
- React.js 加载、刷新数据
class Post extends Component {
constructor(props){
super(props)
this.state={
showContent:"数据加载中..."
}
}
componentWillMount(){
this.setState({
showContent:"数据加载中..."
})
getPostData().then((postContent) => {
this.setState({
showContent:postContent
})
})
}
render () {
return (
<div>
<div className='post-content'>{this.state.showContent}</div>
<button onClick={this.componentWillMount.bind(this)}>刷新</button>
</div>
)
}
}