React JS Components API & Components Life Cycle

4 years ago
Zarabia Riaz
3,449 Views
3

In this session, we will explain React JS Components API & Component’s life cycle with examples and code.

React component API in detail

In this session we will explain React component API with three methods: setState(), forceUpdate and ReactDOM.findDOMNode() in detail. We have to manually bind this in new ES6 classes. In the examples, we will use this.method.bind(this).

Set State

To update the state of the component setState() method is used. This method will not replace the state, but only help to add changes in the original state.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data: []
      }
	
      this.setStateHandler = this.setStateHandler.bind(this);
   };
   setStateHandler() {
      var item = "setState..."
      var myArray = this.state.data.slice();
	  myArray.push(item);
      this.setState({data: myArray})
   };
   render() {
      return (
         <div>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}
export default App;

We used an empty array. Every time we click the button if we click five times the state will be updated and we will get the following result.

Force Update

During work sometimes we need to update the component manually. With the help of the forceUpdate() method, this can be achieved.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
   forceUpdateHandler() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
            <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}
export default App;

We started with a random number that will be updated every time we click the button, and we will get the following result.

Find Dom Node

We can use ReactDOM.findDOMNode() method, for DOM manipulation. First we need to import react-dom.

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor() {
      super();
      this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
   };
   findDomNodeHandler() {
      var myDiv = document.getElementById('myDiv');
      ReactDOM.findDOMNode(myDiv).style.color = 'green';
   }
   render() {
      return (
         <div>
            <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}
export default App;

Once the button is clicked, the color of myDiv element changes to green. we will get the following result

Lifecycle Methods

Before rendering, on both the server and the client-side componentWillMount is executed.

2. Before another render is called componentWillReceiveProps is invoked as soon as the props are updated. When we updated the state, we triggered it from setNewNumber.

3. shouldComponentUpdate should return a true or false value. This will determine. If the component will be updated or not. Just before the rendering component will update is called.

We will set the basic state in the constructor function, in the following example. The setNewnumber is used to update the state. All the lifecycle methods are inside the Content component.

//App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

The main.js file is given below.

//main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

After the initial render, we will get the following result.