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…
Continue reading “Understanding The React Source Code — Initial Rendering (Simple Component) I”

Understanding The React Source Code — Initial Rendering (Class Component) IV

Understanding The #ReactJS Source #Code IV:  via @hackernoon #Javascript

  • /App.css’;class App extends Component { constructor(props) { super(props); this.state = { desc: ‘start’, }; }render() { return ( div className=”App” div className=”App-header” img src=”main.jpg” className=”App-logo” alt=”logo” / h1 “Welcom to React” /h1 /div p className=”App-intro” { this.state.desc } /p /div ); }}export default App;App@App.jsAs mentioned, the component above is rendered…
  • /App.css’;class App extends Component { constructor(props) { super(props); this.state = { desc: ‘start’, }; } render() { return React.createElement( ‘div’, { className: ‘App’ }, React.createElement( ‘div’, { className: ‘App-header’ }, React.createElement( ‘img’, { src: “main.jpg”, className: ‘App-logo’, alt: ‘logo’ } ), React.createElement( ‘h1’, null, ‘ “Welcom to React” ‘ )…
  • Initialize designated data structure:The step is the same as well:1) ReactDOMContainerInfo[ins] represents the container DOM element, TopLevelWrapper is instantiated (TopLevelWrapper[ins]) and is set to alongside the initialization of other properties;3) Again, mountComponentIntoNode is the cross point of upper and lower half, within which returns a complete DOMLazyTree that can be…
  • After those operations complete, the logic processes to the first ramification that is specific to class a `ReactCompositeComponent` from `ReactElement[1]`This step strips the wrapper and creates another ReactCompositeComponent instance to reflect the class component, App.The designated data structure:The call stack in | | | /* we are here */ |…
  • _renderedComponent = child; var markup = transaction, hostParent, hostContainerInfo, debugID); // scr: 3)…// scr: DEV code return designated data structure:The call stack in | | | upper half | /* we are here */ | |Same as in {post two}, the most important task of this step is to instantiate…

Understanding The React Source Code I
Understanding The React Source Code II
Understanding The React Source Code III
Understanding The React Source Code IV (this one) We have completed the rendering…
Continue reading “Understanding The React Source Code — Initial Rendering (Class Component) IV”