Please enable JavaScript.
Coggle requires JavaScript to display documents.
React - Coggle Diagram
React
Fundamental
-
-
-
-
-
Component Life Cycle
3 high-level parts
Mounting, when the component is being initialized and put into the DOM for the first time
Updating, when the component updates as a result of changed state or changed props
Unmounting, when the component is being removed from the DOM
-
-
Review JS
Destructuring
-
Arrays
let cars = ['ferrari', 'tesla', 'ford'];
let [car1, car2, car3] = cars;
Objects
let destinations = { x: 'LA', y: 'NYC', z: 'MIA' };
let { x, y, z } = destinations;
Function Parameters
const printCarInfo = ({model, maker, city}) => {
console.log(The ${model}, or ${maker}, is in the city ${city}.);
};
-
Virtual DOM
DOM is represent as object, then only modified part is updated
A virtual DOM object is a representation of a DOM object, like a lightweight copy.
- Entire virtual DOM gets updated
- Comparing Virtual DOM with its previous version. Figure out which objects have changed
- Update only the changed objects on the real DOM
-
-
-
-
-