React 组件生命周期

作者daliane

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

  • Mounting：已插入真实 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真实 DOM

生命周期的方法有：

  • componentWillMount 在渲染前调用,在客户端也在服务端。

  • componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

  • componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

  • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
    可以在你确认不需要更新组件时使用。

  • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

  • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

  • componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。 

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
);

所有关于生命周期的 

import React, { Component } from 'react';

class LikeButton extends Component {
    constructor(props) {
        super(props);

        // 设置 initial state
        this.state = {
            liked: { liked: false }
        };

        // ES6 类中函数必须手动绑定
        this.handleClick = this.handleClick.bind(this);
    }
    componentWillMount() {
        console.log('Component WILL MOUNT!在渲染前调用,在客户端也在服务端')
    }
    componentDidMount() {
        console.log('Component DID MOUNT!在第一次渲染后调用，只在客户端')
    }
    componentWillReceiveProps(newProps) {
        console.log('Component WILL RECEIVE PROPS!在组件接收到一个新的prop时被调用')
    }
    shouldComponentUpdate(newProps, newState) {
        console.log("shouldComponentUpdate返回一个布尔值。在组件接收到新的props或者state时被调用");
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log('Component WILL UPDATE!在组件接收到新的props或者state但还没有render时被调用');
    }
    componentDidUpdate(prevProps, prevState) {
        console.log('Component DID UPDATE在组件完成更新后立即调用!')
    }
    componentWillUnmount() {
        console.log('Component WILL UNMOUNT在组件从 DOM 中移除的时候立刻被调用!')
    }
    handleClick(event) {
        this.setState({
            liked: !this.state.liked
        });
        // this.state = { liked: !this.state.liked };
    }
    render() {

        let text = this.state.liked ? '喜欢' : '不喜欢';
        return ( < button onClick = { this.handleClick } > { text } < /button>);
        }
    }

    export default LikeButton

类似文章