React component lifecycle

React component lifecycle

The lifecycle function of the React component, also known as the hook function, responds to different states.

In this section we will discuss the lifecycle of react components.

The life cycle of a component can be divided into three states:

• Mounting: The real DOM has been inserted
• Updating: Being re-rendered
• Unmounting: The real DOM has been removed

The life cycle approach is:

• ComponentWillMount is called before rendering, and the client is also on the service side.

• componentDidMount : called after the first rendering, only on the client side. T he component has since generated the corresponding DOM structure, which can be accessed through theis.getDOMNode(). If you want to work with other JavaScript frameworks, you can call actions such as setTimeout, setInterval, or send AJAX requests in this method (to prevent hetero-operations from blocking the UI).

• ComponentWillReceiveProps is called when the component receives a new prop. This method is not called when the render is initialized.

• ShouldComponentUpdate returns a Boolean value. C alled when the component receives a new props or state. I t is not called at initialization or when forceUpdate is used.
  You can use it when you confirm that you do not need to update the component.

• ComponentWillUpdate is called when the component receives a new props or state but does not yet have a render. It is not called at initialization.

• ComponentDidUpdate is called as soon as the component completes the update. It is not called at initialization.

• ComponentWillUnmount is called as soon as the component is removed from the DOM.

A detailed description of these methods can be made in the official documentation.

After the following examples load the Hello component, set a timer with the componentDidMount method, reset the transparency of the component every 100 milliseconds, and re-render:

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 out . . .

The following instance initializes state, and setNewnumber is used to update state. All lifecycles are in content components.

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 out . . .