[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