十、组件的生命周期
最后更新于：2022-04-01 03:42:27
## 十、组件的生命周期
组件的[生命周期](https://facebook.github.io/react/docs/working-with-the-browser.html#component-lifecycle)分成三个状态：
* Mounting：已插入真实 DOM
* Updating：正在被重新渲染
* Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
* componentWillMount()
* componentDidMount()
* componentWillUpdate(object nextProps, object nextState)
* componentDidUpdate(object prevProps, object prevState)
* componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
* componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
* shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
这些方法的详细说明，可以参考[官方文档](http://facebook.github.io/react/docs/component-specs.html#lifecycle-methods)。下面是一个例子（查看 [demo10](https://github.com/ruanyf/react-demos/blob/master/demo10/index.html) ）。
> ~~~
> var Hello = React.createClass({
> getInitialState: function () {
> return {
> opacity: 1.0
> };
> },
>
> componentDidMount: function () {
> this.timer = setInterval(function () {
> var opacity = this.state.opacity;
> opacity -= .05;
> if (opacity < 0.1) {
> opacity = 1.0;
> }
> this.setState({
> opacity: opacity
> });
> }.bind(this), 100);
> },
>
> render: function () {
> return (
> <div style={{opacity: this.state.opacity}}>
> Hello {this.props.name}
> </div>
> );
> }
> });
>
> React.render(
> <Hello name="world"/>,
> document.body
> );
> ~~~
上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。
另外，组件的style属性的设置方式也值得注意，不能写成
> ~~~
> style="opacity:{this.state.opacity};"
> ~~~
而要写成
> ~~~
> style={{opacity: this.state.opacity}}
> ~~~
这是因为 [React 组件样式](https://facebook.github.io/react/tips/inline-styles.html)是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。