DOM:
DOM stands for Document Object Model. It is the hierarchical representation of your web page(UI). It’s a programming interface of XML or HTML documents. It represents our webpage as we can easily modify it using the programming language.
Each time something in the DOM changes. Since DOM is represented as a tree structure, It contains a node for each UI element present in the web document. It is very useful as it allows web developers to modify content through JavaScript, also it being in structured format helps a lot as we can choose specific targets and all the code becomes much easier to work with
Virtual DOM:
Virtual DOM is the copy of real DOM that kept the original DOM in the memory and synced with the real DOM by libraries such as ReactDOM. This process is called Reconciliation. Changing virtual DOMs is easier than real DOM.
Diffing-Algorithm:
A diff algorithm outputs the set of differences between two inputs. These algorithms are the basis of a number of commonly used developer tools. Yet understanding the inner workings of diff algorithms is rarely necessary to use said tools.
React Two virtual trees need to be maintained at the same time DOM Trees ： A tree representing the present DOM structure , The other one is React Generated when the state change is about to be re rendered .React By comparing the differences between the two trees , Decide if it needs to be changed DOM structure , And how to modify . This algorithm is called the Diff Algorithm .
Context API:
In React props passing into the component is a little bit difficult because In a typical React application, data is passed top-down (parent to child) via props.
In that situation we need something to handle this problem. Sometimes we need to pass data into many more components. In that case React gives us a Context API to solve this problem. By using Context API we can share props to any components as we want without any difficulties.
Top comments (0)