React Virtual DOM

Loading...

Del curso dictado por The Hong Kong University of Science and Technology

Front-End Web Development with React

143 calificaciones

The Hong Kong University of Science and Technology

Front-End Web Development with React

143 calificaciones

Curso 2 de 4 en SpecializationFull-Stack Web Development with React

This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript application development and the React library - Be able to implement single page applications in React - Be able to use various React features including components and forms - Be able to implement a functional front-end web application using React - Be able to use Reactstrap for designing responsive React applications - Be able to use Redux to design the architecture for a React-Redux application

De la lección

React Router and Single Page Applications

In this week, you will learn about various component types. You will learn about React router and its use in designing single page applications. You will also learn about single page applications and use React Router to design single page applications.

React Virtual DOM6:54

Exercise (Video): Header and Footer17:01

React Router8:26

Exercise (Video): React Router36:01

Conoce a los instructores

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

In the Browser world,

you often hear people talking about the Browser DOM and DOM Manipulation and so on.

In the React world,

you often hear people talking about the Virtual DOM.

What exactly is the Virtual DOM and how is it different from the Browser DOM,

and why do we have a Virtual DOM?

Similarly, if you learn about view.js,

there also, people mention about the Virtual DOM.

Let's learn a little bit about virtual DOM and

why is it interesting in a React application.

Before we talk about Virtual DOM,

let me again reiterate that the Browser DOM is a browser object.

And so when you render something in your web page,

the Browser DOM is built up,

and so any changes that you want to make to your web page

will be effected when you make changes to the Browser DOM.

Now, in the React world,

the React application maintains a Virtual DOM.

The Virtual DOM is a React object.

The Virtual DOM in React terminology is a lightweight representation of a Browser DOM.

Now, since the Virtual DOM is an in-memory object in your React application,

the Virtual DOM can be easily manipulated by React whenever it's required.

So, manipulations are extremely fast compared to manipulating the Browser DOM.

When you change anything in the Browser DOM,

you need to go and re-render the web page allover again.

But the Virtual DOM,

since it is maintained in memory by your React application,

you can easily make changes to the Virtual DOM.

So, when you have any changes to the state of

your components or changes to the props that a component obtains,

then that may result in the component being re-rendered.

So, this re-rendering is initially done to the Virtual DOM,

so any changes are reflected at the Virtual DOM first.

And then, after that,

we will see how the Browser DOM gets manipulated.

So this Virtual DOM is created completely from scratch every time you call the setState.

So, you'll see that whenever you call setState,

you are changing the state with a new React application,

which also means that it is possible

that some of the props passed into the child components to change,

and so the child components may have to be re-rendered.

So, in the Virtual DOM hierarchy that you build up in your React application,

not all components make it affected by changes to the state of your application.

So, as an example,

on the left side,

I show you a Virtual DOM tree here.

And in that Virtual DOM,

you see I have marked three components there with red red color.

These three components are the ones that have been affected by

a change in the state for my React application.

Now, what that means is that you will have to re-render your view in the browser,

that means that you will need to manipulate the Browser DOM

to make the Browser DOM correspond to

the changes that have been effective in the Virtual DOM.

So, the React application's work is that they will do

a difference between the previous version of

the DOM and the current modified version of the DOM.

So, to notice which parts of the Virtual DOM tree have changed,

then you know which of the components need to be re-rendered.

So in this case, for example,

when these three red components are effected due to the change in the state,

then it may result in re-rendering of

all those nodes that are marked in purple to the right of the screen.

So, only that part of the DOM tree may have to be re-rendered to

ensure that the changes are reflected into the Browser DOM.

So how is this actually done?

Now, with React because React maintains the Virtual DOM which is a React object,

and as we have understood,

manipulating the Virtual DOM is very very fast and effective.

So every time there are changes to the Virtual DOM

and you are at the point of re-rendering the view in the Browser DOM,

then to update the DOM,

React runs in diffing algorithm.

The diffing algorithm will detect all the nodes that have changed.

And so, once it detects all the nodes that are changed as we have seen,

the red color nodes that were marked in the tree there,

this may result in updates to

the entire sub-tree if the diffing detects that two elements are of different types.

So, the diffing algorithm identifies the minimum number

of components or minimum part of the tree that needs to be

updated in order to make the modified version in sync with that Browser DOM.

Then you are rendering multiple items,

for example, in a list.

You can use the key attribute in

the list items in order to indicate which child elements are stable.

Indeed, that is the reason when we rendered list,

we always supply the key attribute to each list item,

and each key attribute was a unique identifier for that particular item in the list.

So, when the diffing algorithm works,

if it notices that some parts of the list cannot change,

they don't need to be re-rendered.

And so, it'll re-render only those list items that have actually been modified.

Now, with the React 16,

there is a new version of the React diffing algorithm called React Fiber.

This is a new reconciliation algorithm that has been launched with

React 16 and it is a lot more faster in performing

the diffing and then identifying what needs to

be changed in the Browser DOM to update the views.

With this quick understanding of what the React Virtual DOM is,

let's move on to learn more about how to make use of the React router in this lesson.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play