React.js
36
React.js
-
Upload
lukasz-kuzynski -
Category
Engineering
-
view
95 -
download
2
Transcript of React.js
React.js
How the webapplications are/were created
Server side templates + jquery
Client side templates + MVC libraries
React.js solves all these problems with Virtual DOM
Real DOM - simplified
Virtual DOM - simplified
Virtual DOM
OldNew
Result on real DOM
Hello World
Hello World
JSX
Optional
Recommended for faster, easier development
Noninvasive transformer
HelloWorld transformed
Component properties
Component properties validation
Changing data
Just rerender the whole application
… or at least big part of it
Changing data
Changing data
Component state
Props vs State
Props
External data
Can’t change it
State
Internal data
Can change it
Private for component
Lifecycle callbacks
„componentWillMount”
„componentDidMount”
„componentWillReceiveProps”
„shouldComponentUpdate”
„componentWillUpdate”
„componentDidUpdate”
„componentWillUnmount”
Events
Form and the state
Form state with mixin
Performance
Always performs only DOM necessary changes
All components are rendered by default
„shouldComponentUpdate” to control whether the rendering is required
Performance
Performance
Performance
Performance
App > TodoList > TodoItem#2
How to implement „shouldComponentUpdate”?
Mutable data
Immutable data
Immutable data
Changing the data immutable way is hard
Helpers
http://facebook.github.io/react/docs/update.html
https://github.com/facebook/immutable-js
„shouldComponentUpdate” with immutable data
„shouldComponentUpdate” with mixin
Server side rendering
Debugging
Performance profiler
Questions
