Virtual

DOM

Objectives

• Describe the virtual DOM

• Define a synthetic events

• Describe changes in React 16 (Fiber)

Virtual DOM

A data structure stored by React that tracks changes from one render state to the next

If something has changed from one render to the next, the browser's DOM is update (Reconciliation)

Reconciliation

App

Instructor

Instructor

Instructor

Synthetic Events

Supports all the native browser events, but provides a consistent API on all browsers

React 16

What's New In Fiber?

React 16

 render() {
   return [
     <div key='a'>First Element</div>,
     <div key='b'>Second Element</div>   
   ];
 }

Render can return an array of JSX elements or a string

React 16

Error Boundary

https://facebook.github.io/

react/blog/2017/07/26/

error-handling-in-react-16.html

React 16

Fiber

https://www.youtube.com/watch?v=ZCuYPiUIONs