Everything I know about React.js.

React isn't an MVC framework

• Reactive view library
• Create reusable UI components
• Composable user interfaces

Model-View-Controller (MVC)

Structural pattern that separates the app into three main components

• Model – Manages the data and rules of the application (React Component)
• View – The output, in React applications, the browser's DOM (.render())
• Controller – Takes user input and converts it into commands for the Model or View layers (click events or API requests)

Virtual DOM

• JavaScript (JSON) object that is a representation of the browser DOM
• Extremely fast compared to the browser DOM
• Can produce 200,000 virtual DOM nodes in a second
• Created completely from scratch on every setState or dispatch

Diffing Algorithm

• A truly minimal difference can be calculated most optimally using an algorithm with 0(n^3)
• React uses optimizations to enhance their algorithm to O(n)
• If a node is found to be different (different type or component) it will re-render the entire subtree
• React traverses the tree breadth first
• This ensures that a node isn't added to the update list if one of its parents also needs to be updated

                 ⃝                 ⃝                  ⃝
                ↙  ↘               ↙  ↘               ↙   ↘
              ⃞    ⃝                 ⃝            ⃝     ⃝
             ↙  ↘  ↙  ↘               ↙  ↘         ↙  ↘   ↙  ↘
            ⃝  ⃝ ⃝  ⃝             ⃝  ⃝       ⃝   ⃝ ⃝   ⃝
            ↓   ↓ ↘                               ↓    ↓ ↘
            ⃞  ⃝ ⃝                             ⃝    ⃝ ⃝

React's diffing algorithm goes level-by-level looking for changes, sees the changes (the two ⃞) that needs to be updated and replaces the entire subtree.

(source: Tech Talk: How React.js works)