[Advanced React] 02. Elements, Children, Re-renders

[reboottime]

Element, Children, and rerenders

This article is part of an advanced React series tutorials.

Major content

• The problem: slow rendering reaction to scroll event - what is an Element
• The fundamental
  • How react rendering works
  • How react re-rendering works - The solution: avoid re-rendering components that are slow to rendering

Address the root cause

[reboottime]

The Problem

• Sympton

  

• Codebase

[reboottime]

Fundamentals

Component VS Element

• Component: The template to create an element

• Element: an object, React.createElement(Child, null, null)

• Go to element detail

  • Type

  • Type as component

    
    • Type as string

  
  
  

Rendering process

• Tree structure

  

• When mounting happens

  

  
  
  

Re-rendering Process

• Diff and reconciliation intro: true? skill re-render,

• Solution

  • Problem causing one
  
  • Problem solving one
  

[reboottime]

Solution