React.js internals

notes.md

React.js

React

• Element is a simple key,ref,props enclosure
• Gets generated on every react batch strategy pass
• It is "owned” by ReactCompositeComponent
• JSX translates tags into ReactElement.createElement ftion calls

ReactCompositeComponent

• React component (class)
• Is has a render method returning ReactElement
• custom:
• built in: has default class implementation covering selection and focus consistency
• built in:
  default html tags get automatically converted into a simple wrapper class returning ReactElement

ReactMount module

Mounting is the process of initializing a React component by creating its representative DOM elements and inserting them into a supplied container.

ReactMount.render(
  component,
  document.getElementById('container')
);

<div id="container">                   <-- Supplied `container`.
  <div data-reactid=".3">              <-- Rendered reactRoot of React
    // ...                                 component.
 </div>

Inside of `container`, the first element rendered is the "reactRoot".

In the render method checks for cached ReactCompositeComponents by React ID from previous render passes

Batching Strategy

Mechanism for batching Component updates (eg. setState calls) including its rerenders (by marking it as dirty) Every batch is ended by flushing all updates from the update queue Updates and the strategy itself are implemented as Transactions (with main methods: init, perform and close) composed of Wrappers

Transaction

• Transaction creates a black box that is able to wrap any method such that
• certain invariants are maintained before and after the method is invoked
• (Even if an exception is thrown while invoking the wrapped method). Whoever
• instantiates a transaction can provide enforcers of the invariants at
• creation time. The Transaction class itself will supply one additional
• automatic invariant for you - the invariant that any transaction instance
• should not be run while it is already being run. You would typically create a
• single instance of a Transaction for reuse multiple times, that potentially
• is used to wrap several different methods. Wrappers are extremely simple -
• they only require implementing two methods. Transactions can be nested.

Wrapper

Building block of Transactions composed of two main init and close methods Transactions make sure that these methods are called independently of any errors (including errors in other wrappers)

Notes

What would happen with implementing immutable into react core??? Perf: try not to use nested updates?