React component life cycle

In this chapter we will discuss the life cycle React components.

Life cycle of a component can be divided into three states:

• Mounting: true DOM has been inserted
• Updating: being re-rendered
• Unmounting: true DOM has been removed

The method of the life cycle are:

• componentWillMount before rendering the call, the client-side service also.

• componentDidMount: after the first call to render only the client.After the component has been generated corresponding DOM structure, can be accessed through this.getDOMNode (). If you want to use with other JavaScript frameworks, you can call this method setTimeout, setInterval or send AJAX requests, etc. (different unit operations to prevent blocking UI).

• componentWillReceiveProps is called when the component receives a new prop.This method will not be called during initialization render.

• shouldComponentUpdate returns a Boolean value.It is called when the component receives new props or state. It is not called upon initialization or use forceUpdate.
  It can be used when you do not need to confirm the updated components.

• componentWillUpdate in component receives new props or state but has no render is called.It will not be called during initialization.

• After the update is completecomponentDidUpdate component called immediately.It will not be called during initialization.

• componentWillUnmount immediately called when the component is removed from the DOM.

A detailed description of these methods, you can refer to the official documentation .

The following examples After Hello components are loaded, set by a timer componentDidMount method every 100 milliseconds transparency reset component and re-rendering:

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

try it"

The following examples are initializedstate, setNewnumberfor updatingstate.All lifecycleContent component.

var Button = React.createClass({
  getInitialState: function() {
    return {
      data:0
    };
  },
  setNewNumber: function() {
    this.setState({data: this.state.data + 1})
  },
  render: function () {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
    }
})
var Content = React.createClass({
  componentWillMount:function() {
      console.log('Component WILL MOUNT!')
  },
  componentDidMount:function() {
       console.log('Component DID MOUNT!')
  },
  componentWillReceiveProps:function(newProps) {
        console.log('Component WILL RECIEVE PROPS!')
  },
  shouldComponentUpdate:function(newProps, newState) {
        return true;
  },
  componentWillUpdate:function(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
  },
  componentDidUpdate:function(prevProps, prevState) {
        console.log('Component DID UPDATE!')
  },
  componentWillUnmount:function() {
         console.log('Component WILL UNMOUNT!')
  },

    render: function () {
      return (
        <div>
          <h3>{this.props.myNumber}</h3>
        </div>
      );
    }
});
ReactDOM.render(
   <div>
      <Button />
   </div>,
  document.getElementById('example')
);

try it"