React - Rendering (Lifecycle)

About

rendering in React (ie update of the DOM)

Trigger

To make the UI interactive, you need to be able to trigger changes to your underlying data model.

Root

The root element is the passed to the ReactDOM.render function as argument.

Children Component

state

A change of state trigger a changes of UI (ie will render the component again)

For:

setMyVariable("NewValue");
this.setState({ "whatever":"whatever"});

props

A change of props does not trigger a changes of UI. props define the original state.

Lifeycle

In React:

  • Rendering is called mounting
  • Removing is called unmounting
  • Updating is called updating

Lifecycle management is different by type of component syntax used. For:

Management

Conditional

Conditional rendering with control flow statement (such as if, then else, … or the conditional (ternary) operator).

let button = null;
if (isLoggedIn) {
  button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
  button = <LoginButton onClick={this.handleLoginClick} />;
}

No Rendering

The component must return null instead of its render output

ReactDOM.render

ReactDOM.render is the main function that renders the root element

For example, see React - Root element

Why

Documentation / Reference


Powered by ComboStrap