React.js



Virtual DOM is an in-memory representation of real DOM. It is a lightweight JavaScript object which is a copy of Real DOM.

Updating virtual DOM in ReactJS is faster because ReactJS uses

  1. Efficient diff algorithm
  2. Batched update operations
  3. Efficient update of subtree only
  4. Uses observable instead of dirty checking to detect the changeAt any given time, ReactJS maintains two virtual DOM, one with the updated state Virtual DOM and other with the previous state Virtual DOM.

ReactJS uses the following steps to find the difference in both the Virtual DOM’s

  1. Re-render all the children if parent state has changed. If the state of a component has changed, then ReactJS re-renders all the child components even if child components are not modified. To prevent the unwanted re-render of the child components we can use shouldComponentUpdate() component life cycle method. This will further help in boosting performance.
  2. Breadth First Search. ReactJS traverse the tree using BFS. Consider the below tree. States of element B and H have changed. So when using BFS ReactJS reached element B it will by default re-render the element H. This is the reason to use BFS for tree traversal

3. Reconciliation. It is the process to determine which parts of the Real DOM need to be updated. It follows the below steps:

  1. Two elements of different types will produce different trees.
  2. The developer can hint at which child elements may be stable across different renders with a key prop.

Types of components

  • Functional Components.
  • Class Components.
  • Pure Components.
  • Higher-Order Components.

Lifecycle methods





Pure components in react.js:

Shallow compare does check for equality. When comparing scalar values (numbers, strings) it compares their values. When comparing objects, it does not compare their's attributes - only their references are compared (e.g. "do they point to same object?).
Let's consider following shape of user object
user = {
  name: "John",
  surname: "Doe"
}

Example 1:

const user = this.state.user;
user.name = "Jane";

console.log(user === this.state.user); // true
Notice you changed users name. Even with this change objects are equal. They references are exactly same.

Example 2:

const user = clone(this.state.user);
console.log(user === this.state.user); // false
Now, without any changes to object properties they are completely different. By cloning original object you create new copy, with different reference.
Clone function might look as this (ES6 syntax)
const clone = obj => Object.assign({}, ...obj);
Shallow compare is efficient way to detect changes. It expect you don't mutate data.

https://hackernoon.com/why-you-should-keep-your-react-components-pure-by-using-hocs-67e5c7f80c81

 I was working on react 15. But below things are as per the latest version. I'll 

  • why super(props)?
  • virtual DOM
  • JSX
  • why JSX
  • Fragment
  • state vs props
  • diff components(container, presentational)
  • Event binding
  • having unique for each item in iteration
  • ES6
  • Lifecycle hooks and syntax
Reactjs with nodejs:

No comments:

Post a Comment

Subscribe to: Posts (Atom)