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

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

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

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

    • componentWillMount()
    • componentDidMount()
    • componentWillUpdate(object nextProps,object nextState)
    • componentDidUpdate(object prevProps,object prevState)
    • componentWillUnmount()
    • @H_301_19@
      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相关文章