React JS

The way of handling events in React component is much similar to DOM events processing in pure Javascript. You just define a response function and let it be the event handler and listen an event. React.js will be responsible for executing the event handler function when the listened event is detected.

The important difference to which you should pay attention here is that you set a handler via the event props(property) of a React element instead of the event handler attribute of a HTML DOM element.

This is simple example where we only use one component. We are just adding onClick event that will trigger updateState function once the button is clicked.

App.jsx

import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);
  
      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState() {
      this.setState({data: 'Data updated...'})
   }

   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}

export default App;

main.js

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

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

This will produce following result:

Child Events

When you need to update state of the parent component from its child, you can create event handler (updateState) in the parent component and pass it as a prop (updateStateProp) to your child component where you can just call it.

App.jsx

import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);
  
      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);
   };

   updateState() {
      this.setState({data: 'Data updated from the child component...'})
   }

   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}

class Content extends React.Component {

   render() {
      return (
         <div>
            <button onClick = {this.props.updateStateProp}>CLICK</button>
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}

export default App;

main.js

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

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

1 Lifecycle

A React component in browser can be any of the following three statuses: mounted, update and unmounted.

So React component lifecycle can be divided into three phases according to these statuses: mounting, updating and unmounting.

Mounting

React.js exposed interfaces or hook methods in each phase of component lifecycle.

Initializing state

You can optionally set initial state value in constructor() method of the component if you are using ES6syntax.

const tom_and_jerry = [
    {
        name: 'Tom', 
        score: 55
    },
    {
        name: 'Jerry', 
        score: 80
    }
];

class ScoreBoard extends React.Component {
    constructor(props) {
        super(props);
        this.state = { players: tom_and_jerry }
    }
    
    // ...
}

If you are using ES5 syntax, getInitialState() in the right place to initialize component state.

var ScoreBoard = React.createClass({
    getInitialState: function() {
        return {
            players: tom_and_jerry
        }
    },
    
    // ...
});

The getInitialState() method is called only one time before the component is mounted.

Initialization of state should typically only be done in a top level component, which acts as a role of controller view in your page.

Default props

You can also define default values of component props (properties) if the parent component does not declare their values.

Return default props using ES7+ static property initializer.

class SinglePlayer extends React.Component {
    static defaultProps = {
        name: 'Nobody',
        score: 0
    }
    
    // ...
}

Default props in ES6:

class SinglePlayer extends React.Component {    
    // ...
}

SinglePlayer.defaultProps = {
    name: 'Nobody', 
    score: 0
}

You can define getDefaultProps() method in ES5.

var SinglePlayer = React.createClass({
    getDefaultProps: function() {
        return {
            name: 'Nobody', 
            score: 0
        }
    }
});

The getDefaultProps() method is called only once before any instance of the component is created. So you should avoid using this.props inside getDefaultProps() method.

componentWillMount()

The componentWillMount() method is invoked only once before initial rendering.

It is also a good place to set initial state value inside componentWillMount().

class SinglePlayer extends React.Component {
    componentWillMount() {
        this.setState({
            isPassed: this.props.score >= 60
        });
        
        alert('componentWillMount => ' + this.props.name);
        console.log('componentWillMount => ' + this.props.name);   
    }
    
    // ...
}

componentDidMount()

This lifecycle method will be invoked after rendering.

It is the right place to access DOM of the component.

class ScoreBoard extends React.Component {
    constructor(props) {
        super(props);
        this._handleScroll = this.handleScroll.bind(this);
    }
    handleScroll() {}
    componentDidMount() {
        alert('componentDidMount in NoticeBoard');
        window.addEventListener('scroll', this._handleScroll);
    }
    
    // ...
}

Updating

componentWillReceiveProps()

void componentWillReceiveProps(object nextProps)

This method will be invoked when a component is receiving new props. componentWillReceiveProps() won't be called for the initial rendering.

class SinglePlayer extends React.Component {
    componentWillReceiveProps(nextProps) {
        // Calculate state according to props changes
        this.setState({
            isPassed: nextProps.score >= 60
        });
    }
}

The old props can be accessed via this.props inside componentWillReceiveProps(). Typically, you can set state according to changes of props in this method.

shouldComponentUpdate()

boolean shouldComponentUpdate(object nextProps, 
                              object nextState)

shouldComponentUpdate() will be invoked before rendering when new props or state are being received. This method won't be called on initial rendering.

shouldComponentUpdate() returns true by default.

This method is usually an opportunity to prevent the unnecessary rerendering considering performance. Just let shouldComponentUpdate() return false, then the render() method of the component will be completely skipped until the next props or state change.

class SinglePlayer extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        // Don't rerender if score doesn't change, 
        if ( nextProps.score == this.props.score ) {
            return false;
        }

        return true;
    }
}

componentWillUpdate()

void componentWillUpdate(object nextProps, 
                         object nextState)

Invoked just before render(), but after shouldComponentUpdate() (of course, return a true). This method is not called for the initial rendering.

Use this as an opportunity to prepare for an update.

class SinglePlayer extends React.Component {
    componentWillUpdate(nextProps, nextState) {
        alert('componentWillUpdate => ' + this.props.name);
        console.log('componentWillUpdate => ' + this.props.name);
    }
}

componentDidUpdate()

void componentDidUpdate(object prevProps, 
                        object prevState)

Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial rendering.

You can perform DOM operations after an update inside this function.

class SinglePlayer extends React.Component {
    componentDidUpdate(prevProps, prevState) {
        alert('componentDidUpdate => ' + this.props.name);
        console.log('componentDidUpdate => ' + this.props.name);
    }
}

Unmounting

void componentWillUnmount()

This is invoked immediately before a component is unmounted or removed from the DOM.

Use this as an opportunity to perform cleanup operations. For example, unbind event listeners here to avoid memory leaking.

class ScoreBoard extends React.Component {
    componentWillUnmount() {
        window.removeEventListener('scroll', this._handleScroll);
    }
}

Sample codes

Complete sample codes to log each lifecycle method call in browser's console.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Component Lifecycle Demo</title>
    <!-- react includes two parts: react.js and react-dom.js -->
    <script src="//fb.me/react-15.2.1.js"></script>
    <script src="//fb.me/react-dom-15.2.1.js"></script>

    <!-- babel standalone -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>

    <script type="text/babel">
        const tom_and_jerry = [
            {
                name: 'Tom',
                score: 55
            },
            {
                name: 'Jerry',
                score: 80
            }
        ];

        class SinglePlayer extends React.Component {
            constructor(props) {
                super(props);
                this.state = { isPassed: false }
            }
            componentWillMount() {
                // Mark it as 'Pass' if score >= 60
                this.setState({
                    isPassed: this.props.score >= 60
                });

                console.log('componentWillMount => ' + this.props.name);
                alert('componentWillMount => ' + this.props.name);
            }
            componentDidMount() {
                console.log('componentDidMount => ' + this.props.name);
                alert('componentDidMount => ' + this.props.name);
            }
            componentWillReceiveProps(nextProps) {
                // Calculate state according to props changes
                this.setState({
                    isPassed: nextProps.score >= 60
                });

                console.log('componentWillReceiveProps => ' + this.props.name + ': ' + nextProps.score);
                alert('componentWillReceiveProps => ' + this.props.name + ': ' + nextProps.score);
            }
            shouldComponentUpdate(nextProps, nextState) {
                // Don't rerender if score doesn't change,
                if ( nextProps.score == this.props.score ) {
                    console.log('shouldComponentUpdate => ' + this.props.name + '? false');
                    alert('shouldComponentUpdate => ' + this.props.name + '? false');
                    return false;
                }

                console.log('shouldComponentUpdate => ' + this.props.name + '? true');
                alert('shouldComponentUpdate => ' + this.props.name + '? true');
                return true;
            }
            componentWillUpdate(nextProps, nextState) {
                console.log('componentWillUpdate => ' + this.props.name);
                alert('componentWillUpdate => ' + this.props.name);
            }
            componentDidUpdate(prevProps, prevState) {
                console.log('componentDidUpdate => ' + this.props.name);
                alert('componentDidUpdate => ' + this.props.name);
            }
            componentWillUnmount() {
                console.log('componentDidUpdate => ' + this.props.name);
                alert('componentDidUpdate => ' + this.props.name);
            }
            render() {
                console.log("render => " + this.props.name);
                return (
                    <div>
                        <h5><span>Name: </span>{this.props.name}</h5>
                        <p><span>Score: </span><em>{this.props.score}</em></p>
                        <p><span>Pass: </span><input type="checkbox" defaultChecked={this.state.isPassed} disabled={true}  /></p>
                    </div>
                );
            }
        }

        class ScoreBoard extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    players: tom_and_jerry
                };
            }
            changeScore(amount) {
                if ( typeof(amount) != "number" ) {
                    return;
                }

                let players = this.state.players;
                let tom = players[0];
                tom.score = tom.score + amount;

                tom.score = (tom.score > 100) ? 100 : tom.score;
                tom.score = (tom.score < 0) ? 0 : tom.score;

                players[0] = tom;
                this.setState({ players: players });
            }
            render() {
                return (
                    <div>
                        <h4>Score Board</h4>
                        <div>
                            <button onClick={ (amount) => this.changeScore(5) }>Score of Tom: +5</button>
                            <button onClick={ (amount) => this.changeScore(-5) }>Score of Tom: -5</button>
                        </div>
                        {
                            this.state.players.map((v, idx) => {
                                return <SinglePlayer key={idx} name={v.name} score={v.score} />
                            })
                        }
                    </div>
                );
            }
        }



        class App extends React.Component {
            render() {
                return (
                    <div>
                        <h1>React Component Lifecycle Demo</h1>
                        <ScoreBoard />
                    </div>
                )
            }
        }

        // Mount root App component
        ReactDOM.render(<App />, document.getElementById('app'));
    </script>
</body>
</html>

React JS

ReactJS Events

App.jsx

main.js

Child Events

App.jsx

main.js

ReactJS Lifecycle

1 Lifecycle

Mounting

Initializing state

Default props

componentWillMount()

componentDidMount()

Updating

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

componentDidUpdate()

Unmounting

Sample codes