我们把 React.js
将组件渲染,并且构造 DOM
元素然后塞入页面的过程称为组件的挂载。
React.js
控制组件在页面上挂载和删除过程里面几个方法:
componentWillMount
:组件挂载开始之前,也就是在组件调用 render
方法之前调用。componentDidMount
:组件挂载完成以后,也就是 DOM
元素已经插入页面后调用。componentWillUnmount
:组件对应的 DOM
元素从页面中删除之前调用。这是因为,当时钟隐藏的时候,我们并没有清除定时器。时钟隐藏的时候,定时器的回调函数还在不停地尝试 setState
,由于 setState
只能在已经挂载或者正在挂载的组件上调用,所以 React.js
开始疯狂报错。
多次的隐藏和显示会让 React.js
重新构造和销毁 Clock
组件,每次构造都会重新构建一个定时器。而销毁组件的时候没有清除定时器,所以你看到报错会越来越多。而且因为 JavaScript
的闭包特性,这样会导致严重的内存泄漏。
这时候 componentWillUnmount
就可以派上用场了,它的作用就是在组件销毁的时候,做这种清场的工作。例如清除该组件的定时器和其他的数据清理工作。我们给 Clock
添加 componentWillUnmount
,在组件销毁的时候清除该组件的定时器。
总结
我们一般会把组件的 state
的初始化工作放在 constructor
里面去做;在 componentWillMount
进行组件的启动工作,例如 Ajax
数据拉取、定时器的启动;组件从页面上销毁的时候,有时候需要一些数据的清理,例如定时器的清理,就会放在 componentWillUnmount
里面去做。
组件的挂载指的是将组件渲染并且构造 DOM
元素然后插入页面的过程。
除了挂载阶段,还有一种“更新阶段”。说白了就是 setState
导致 React.js
重新渲染组件并且把组件的变化应用到 DOM
元素上的过程,这是一个组件的变化过程。而 React.js
也提供了一系列的生命周期函数可以让我们在这个组件更新的过程执行一些操作。
更新阶段的组件生命周期:
shouldComponentUpdate(nextProps, nextState)
:你可以通过这个方法控制组件是否重新渲染。如果返回 false
组件就不会重新渲染。这个生命周期在 React.js
性能优化上非常有用。componentWillReceiveProps(nextProps)
:组件从父组件接收到新的 props
之前调用。componentWillUpdate()
:组件开始重新渲染之前调用。componentDidUpdate()
:组件重新渲染并且把改变更到真实的 DOM
以后调用。React.js
组件是有更新阶段的,并且有这么几个更新阶段的生命周期即可。
组件加载: componentWillMount
componentWillMount
会在组件render
之前执行,并且永远都只执行一次。
由于这个方法始终只执行一次,所以如果在这里定义了setState
方法之后,页面永远都只会在加载前更新一次。
组件加载: componentDidMount
这个方法会在组件加载完毕之后立即执行。在这个时候之后组件已经生成了对应的DOM
结构,可以通过this.getDOMNode()
来进行访问。
如果你想和其他
JavaScript
框架一起使用,可以在这个方法中执行setTimeout
,setInterval
或者发送AJAX
请求等操作(防止异部操作阻塞UI
)。
组件更新: componentWillReceiveProps
componentWillReceiveProps(object nextProps)
在组件接收到一个新的prop
时被执行。这个方法在初始化render
时不会被调用。
旧的props
可以通过this.props
来获取。在这个函数内调用this.setState()
方法不会增加一次新的render
。
组件更新: shouldComponentUpdate
boolean shouldComponentUpdate(object nextProps, object nextState)
返回一个布尔值。在组件接收到新的props
或者state
时被执行。在初始化时或者使用forceUpdate
时不被执行。
如果shouldComponentUpdate
返回false
, render()
则会在下一个state change
之前被完全跳过。(另外componentWillUpdate
和componentDidUpdate
也不会被执行)。
默认情况下shouldComponentUpdate
会返回true
。
组件更新: componentWillUpdate
componentWillUpdate(object nextProps, object nextState)
在组件接收到新的props
或者state
但还没有render
时被执行。在初始化时不会被执行。
一般用在组件发生更新之前。
组件更新: componentDidUpdate
componentDidUpdate(object prevProps, object prevState)
在组件完成更新后立即执行。在初始化时不会被执行。一般会在组件完成更新后被使用。例如清除notification
文字等操作。
组件卸载: componentWillUnmount
主要用来执行一些必要的清理任务。例如清除setTimeout
等函数,或者任意的在componentDidMount
创建的DOM
元素。
参考文章:组件生命周期