![Advantages
Declarative Nature
numbers = [1,2,3,4]
total = 0
for(i=0; i<numbers.length; i++)
{
total = total + numbers[i]
}
Implicit Declarative
numbers = [1,2,3,4]
numbers.reduce(
function(previousValue, currentValue) {
return previousValue + currentValue;
});
• componentWillMount()
• componentWillReceiveProps( {NextProps} )
• componentDidUpdate( {PreviousProps} , {PreviousState} )
• componentDidMount()
• componentWillUnmount()
• getInitialState
Example](https://image.slidesharecdn.com/react-160630145742/85/React-js-The-Dawn-of-Virtual-DOM-19-320.jpg)
More Related Content
Similar to React.js - The Dawn of Virtual DOM (20)
React.js - The Dawn of Virtual DOM
- 1. React The Dawn of Virtual DOM
- 2. What is React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES Main Features • Just V of MVC • Virtual DOM • One Way Data Flow
- 3. Background of React • Started by Facebook in 2013 • Motivation - building large applications with data that changes over time. • Over 40k+ Star on Github and 645 contributors • You are in a good company Source - https://github.com/facebook/react/wiki/Sites-Using-React
- 4. Lets Get started The most important thing Virtual DOM To understand this We need to first see Real DOM The Reason for performance
- 5. Real DOM Disadvantage DOM manipulation APIs are slow Surprisingly 😟 All the framework do this on every update
- 6. Enter the Dawn of Virtual DOM React DOM Update Strategy
- 7. React’s Virtual DOM Strategy On every update to component • React Builds New Virtual DOM Subtree • Diff with the actual DOM • Computes minimal DOM mutation • Batch executes updates
- 8. Benefits Minimal DOM manipulation calls Batch execution saves a lot of computation Super Fast Performance
- 10. Getting started with React React Terminology React Elements (Basic Building Block) var root = React.createElement('div'); React.js Main React Library react-dom.js Supporting library to generate DOM notation Factories (Called internally by React Element) function createFactory(type) { return React.createElement.bind(null, type); } React Nodes Tree of React Element React Components var MyComponent = React.createClass({ render: function() { ... } }); (Encapsulated React Elements) (You will use this the most)
- 11. React Recommends Use of JSX What is JSX ped, object-oriented programming language designed to run on m In short Its just like Type script and transpiles into Plain Javascript Without JSX With JSX
- 12. Recommended Build Tool Webpack • Bundles JS using require.js • Minification, Linting, Production Build • Loaders system allows easy extensibility • Just like gulp but more powerful • Lets us use ES6 and ES7 features • React tags are transformed automatically using babel-react- presets module
- 13. Demo Time
- 14. Props • Props are like parameter to functions • They make component super re-usable • Way to pass info from one component to other component • Includes props type validation to ensure sanity of data Demo
- 15. STATE • Holds the current state of the component • Update in the state variable updates the component • getInitialState and setState method for updating state value Demo
- 16. Refs • Used to keep reference to components • If callback function is passed, then callback is executed just after the component mounts with component as parameter • Possible application includes animation, finding specific node
- 17. Component Specification • render -> Required method. Returns ReactElement • getInitialState -> Not Required, If we require some default state for component • getDefaultProps -> Not Required. If we want to set default value of prop. • propTypes -> Not Required. Allows the prop type validation Demo
- 18. Component Lifecycle • componentWillMount -> Invoked before the initial rendering of component • componentWillReceiveProps -> Invoked before the component receives the props (not on initial render) • componentDidUpdate -> Invoked immediately after the update of comports are flushed to DOM • componentDidMount -> Invoked after initial rendering of the component (Used for fetching data from server) • componentWillUpdate -> Called before rendering. • shouldComponentUpdate -> Must return true (or) false. Called when new state (or) props are being received. • componentWillUnmount -> Called before component is unmounted
- 19. Advantages Declarative Nature numbers = [1,2,3,4] total = 0 for(i=0; i<numbers.length; i++) { total = total + numbers[i] } Implicit Declarative numbers = [1,2,3,4] numbers.reduce( function(previousValue, currentValue) { return previousValue + currentValue; }); • componentWillMount() • componentWillReceiveProps( {NextProps} ) • componentDidUpdate( {PreviousProps} , {PreviousState} ) • componentDidMount() • componentWillUnmount() • getInitialState Example
- 20. Advantages Composition • Rather than building one big component, React allows to focus building mini components to compose one big component out of it. • Highly reusable code
- 21. Synthetic events • Only single event listener is binded per component • Results in less memory usage and improvement in perform
- 22. Plain Javascript • Directive • digest cycle • Transclude function • $scope and $rootScope • $scope.$apply We have all suffered our way through Not anymore React is pure javascript Less time learning and more time implementing
- 23. Best in class dev tool react-devtools
- 24. Growing Eco system React-router Axios - Promise library Redux React-Desktop React-Native react-material Source - https://github.com/enaqx/awesome-react#components countless more ……. React-select
- 25. Thank You