What is workflow of the React

Question

The code below is from React, which updates the DOM dynamically. I used the tutorial by Facebook react but did not understand the whole code, i.e which part of the code executes when and how it triggers the rest of the parts in the code. Please kindly help me in understanding the code.

var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});

var TodoApp = React.createClass({
  getInitialState: function() {
   return {items: [], text: ''};
  },

  onChange: function(e) {
    this.setState({text: e.target.value});
  },

  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },

  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
   }
});
React.renderComponent(<TodoApp />, mountNode);

The above code is used to dynamically update the DOM structure. This code is referred from http://facebook.github.io/react/ so please help in knowing the work process of the code.

Answer 1

Thanks, that's a very good question. Here's a rough overview of what is happening behind the scenes:

Initialization

It all starts with this line:

React.renderComponent(<TodoApp />, mountNode);

This instantiate the TodoApp component which calls:

TodoApp::getInitialState()

then, it renders the TodoApp component

TodoApp::render()

which in turns instantiate a TodoList

TodoList::render()

At this point, we have everything we need in order to render the initial markup

<div>
  <h3>TODO</h3>
  <ul></ul> <!-- <TodoList> -->
  <form>
    <input value="" />
    <button>Add #1</button>
  </form>
</div>

It is stringified and added inside of mountNode via innerHTML

OnChange

Then let's say you're going to enter some text in the input, then

TodoApp::onChange

is going to be called, which is going to call

TodoApp::setState

and in turn will call

TodoApp::render

again and generate the updated DOM

<div>
  <h3>TODO</h3>
  <ul></ul> <!-- <TodoList> -->
  <form>
    <input value="sometext" />
    <button>Add #1</button>
  </form>
</div>

What's happening at this point is that React is going to do a diff between the previous DOM and the current one.

    <div>
      <input
-       value=""
+       value="sometext"

Only the value of the input changed, so React is going to just update this particular attribute in the real DOM.

Answer 2

You can find more general explanation on React official page. Generally the react lifecycle can be described by the following stages (which can repeat multiple times once the components is created):

Initializing values (only once):

    constructor(){ ... }

Mounting, if you need to add something after initial rendering (only once):

    componentDidMount(){...}

Re-rendering functions, variables and components

    myArrowFunction = () => {
      ...
      this.setState({...})
      ...  
    }   

Updating:

    componentDidUpdate()}{...}
    shouldComponentUpdate(){...}

Unmounting:

    componentWillUnmount(){...}

Rendering happens here

    render(){...}