Understanding The React Source Code — Initial Rendering (Simple Component) I

  • var childrenLength = arguments.length — 2; if (childrenLength === 1) { props.children = children; // scr: one child is stored as object } else if (childrenLength 1) { var childArray = Array(childrenLength); for (var i = 0; i childrenLength; i++) { childArray[i] = arguments[i + 2]; // scr: multiple children…
  • …var ReactElement = function(type, key, ref, self, source, owner, props) { // This tag allow us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE,// Built-in properties that belong on the element type: // scr: ————– ‘h1’ key: // scr: ————– not of interest for now ref: // scr:…
  • The name TopLevelWrapper explains what it does — wrap the top level element (of the component tree passed through render()):An important definition here is that of TopLevelWrapper, I type three stars here *** for you to CTL-f, as you might need to come back to this definition later:…var TopLevelWrapper = function() {…
  • The only line that is effective before the logic processes to next step is… var nextWrappedElement = { child: nextElement, that it should be easy to see how the target object of this step is constructed with React.createElement, the function we just examined in the last a `ReactCompositeComponent` using `ReactElement[2]`The…
  • In our context, it checks the ReactElement[2]’s type (i.e., TopLevelWrapper) and creates a ReactCompositeComponent accordingly.function shouldHaveDebugID) { var instance;… } else if (typeof node === ‘object’) { var element = node; var type = element.type;… // Special case string values if (typeof element.type === ‘string’) {… } else if {……

UI updating, in its essential, is data change. React offers a straightforward and intuitive way to program front-end Apps as all the moving parts are converged in the form of states. Code review of…

Understanding The React Source Code — Initial Rendering (Simple Component) IPhoto by Gerrie van der Walt The React Source Code I (this one)Understanding The React Source Code IIUnderstanding The React Source Code IIIUnderstanding The React Source Code IVUnderstanding The React Source Code VUI updating, in its essential, is data change. React offers a straightforward and intuitive way to program front-end Apps with all the moving parts converged in the form of states. Code review is also made easier to me as I like to start with data structures for a rough expectation of the functionalities and processing logic. From time to time, I was curious about how React works internally, hence this article.It never hurts to have a deeper understanding down the stack, as it gives me more freedom when I need a new feature, more confidence when I want to contribute and more comfort when I upgrade.This article will start walking through one of the critical paths of React by rendering a simple component, i.e., a h1. Other topics (e.g., Composite components rendering, state driven UI updating and components life cycle) will be discussed in the following articles in the similar actionable manner.Files used in this article:isomorphic/React.js: entry point of workhorse of entry point of workhorse of create different types of ReactComponents based on element ReactComponents wrapper of root elementTags used in the call stack:- function call= alias~ indirect function callAs the locations of source code files can not be obviously derived from import statement in the flat module tree, I…

Understanding The React Source Code — Initial Rendering (Simple Component) I