第一章、react 组件的生命周期

前端之家收集整理的这篇文章主要介绍了第一章、react 组件的生命周期前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

组件的生命周期分成三个状态:

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM
React 为每个状态都提供了两种处理函数 will 函数在进入状态之前调用 did 函数在进入状态之后调用,三种状态共计五种处理函数

  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps,object nextState)
  • componentDidUpdate(object prevProps,object prevState)
  • componentWillUnmount()
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>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,document.body
);

猜你在找的React相关文章