![Pair-wise Diff
Different Node Types
renderA: <div />
renderB: <span />
=> [removeNode <div />], [insertNode <span />]
Code
renderA: <Header />
renderB: <Content />
=> [removeNode <Header />], [insertNode <Content />]
Code](https://image.slidesharecdn.com/react-150424024038-conversion-gate02/85/React-Lifecycle-and-Reconciliation-39-320.jpg)
![Pair-wise Diff
DOM Nodes
renderA: <div id="before" />
renderB: <div id="after" />
=> [replaceAttribute id "after"]
Code
renderA: <div style={{color: 'red'}} />
renderB: <div style={{fontWeight: 'bold'}} />
=> [removeStyle color], [addStyle font-weight 'bold']
Code](https://image.slidesharecdn.com/react-150424024038-conversion-gate02/85/React-Lifecycle-and-Reconciliation-40-320.jpg)
![List-wise Diff
Problematic Case
renderA: <div><span>first</span></div>
renderB: <div><span>first</span><span>second</span></div>
=> [insertNode <span>second</span>]
Code
renderA: <div><span>first</span></div>
renderB: <div><span>second</span><span>first</span></div>
=> [replaceAttribute textContent 'second'], [insertNode
<span>first</span>]
Code](https://image.slidesharecdn.com/react-150424024038-conversion-gate02/85/React-Lifecycle-and-Reconciliation-41-320.jpg)
![List-wise Diff
Problematic Case
renderA: <div><span>first</span></div>
renderB: <div><span>first</span><span>second</span></div>
=> [insertNode <span>second</span>]
Code
renderA: <div><span>first</span></div>
renderB: <div><span>second</span><span>first</span></div>
=> [replaceAttribute textContent 'second'], [insertNode
<span>first</span>]
Code
Levenshtein Distance
O(n2)](https://image.slidesharecdn.com/react-150424024038-conversion-gate02/85/React-Lifecycle-and-Reconciliation-42-320.jpg)
![List-wise Diff
Keys
renderA: <div><span key="first">first</span></div>
renderB: <div><span key="second">second</span><span
key="first">first</span></div>
=> [insertNode <span>second</span>]
Code
If you specify a key, React is now able to find insertion,
deletion, substitution and moves in O(n) using a hash table.](https://image.slidesharecdn.com/react-150424024038-conversion-gate02/85/React-Lifecycle-and-Reconciliation-43-320.jpg)
React Lifecycle and Reconciliation
- 17. Something about Lifecycle componentDidUpdate componentWillUnmount Post-updating render … Unmounting
- 19. The usage of React is intuitive
- 20. The usage of React is intuitive We re-render whenever state changes
- 21. The usage of React is intuitive We re-render whenever state changes Re-rendering seems expensive…
- 22. The usage of React is intuitive We re-render whenever state changes Re-rendering seems expensive… But the truth is
- 23. The usage of React is intuitive React is FAST!!! We re-render whenever state changes Re-rendering seems expensive… But the truth is
- 24. The usage of React is intuitive React is FAST!!! We re-render whenever state changes Re-rendering seems expensive… But the truth is WTF???
- 26. Batching • Whenever you call setState on a component, React will mark it as dirty. At the end of the event loop, React looks at all the dirty components and re-renders them. • This batching means that during an event loop, there is exactly one time when the DOM is being updated. This property is key to building a performant app and yet is extremely difficult to obtain using commonly written JavaScript. In a React application, you get it by default.
- 27. Batching • Whenever you call setState on a component, React will mark it as dirty. At the end of the event loop, React looks at all the dirty components and re-renders them. • This batching means that during an event loop, there is exactly one time when the DOM is being updated. This property is key to building a performant app and yet is extremely difficult to obtain using commonly written JavaScript. In a React application, you get it by default.
- 28. Sub-tree Rendering • Whenever you call setState on a component, React will mark it as dirty. At the end of the event loop, React looks at all the dirty components and re-renders them. • This batching means that during an event loop, there is exactly one time when the DOM is being updated. This property is key to building a performant app and yet is extremely difficult to obtain using commonly written JavaScript. In a React application, you get it by default.
- 29. Sub-tree Rendering • Whenever you call setState on a component, React will mark it as dirty. At the end of the event loop, React looks at all the dirty components and re-renders them. • This batching means that during an event loop, there is exactly one time when the DOM is being updated. This property is key to building a performant app and yet is extremely difficult to obtain using commonly written JavaScript. In a React application, you get it by default. With shouldComponentUpdate, you have control over whether a component should be re-rendered.
- 30. Sub-tree Rendering • Whenever you call setState on a component, React will mark it as dirty. At the end of the event loop, React looks at all the dirty components and re-renders them. • This batching means that during an event loop, there is exactly one time when the DOM is being updated. This property is key to building a performant app and yet is extremely difficult to obtain using commonly written JavaScript. In a React application, you get it by default. shouldComponentUpdate This function is going to be called all the time, so you want to make sure that it takes less time to compute the heuristic than the time it would have taken to render the component, even if re-rendering was not strictly needed.
- 33. Why Another Tree Diff Algorithm?
- 34. Why Another Tree Diff Algorithm? O(n3)
- 35. Why Another Tree Diff Algorithm? O(n3) 1000 nodes would require in the order of ONE BILLION comparisons.
- 37. 2 Basic Assumptions • Two components of the same class will generate similar trees and two components of different classes will generate different trees.
- 38. 2 Basic Assumptions • Two components of the same class will generate similar trees and two components of different classes will generate different trees. • It is possible to provide a unique key for elements that is stable across different renders.
- 39. Pair-wise Diff Different Node Types renderA: <div /> renderB: <span /> => [removeNode <div />], [insertNode <span />] Code renderA: <Header /> renderB: <Content /> => [removeNode <Header />], [insertNode <Content />] Code
- 40. Pair-wise Diff DOM Nodes renderA: <div id="before" /> renderB: <div id="after" /> => [replaceAttribute id "after"] Code renderA: <div style={{color: 'red'}} /> renderB: <div style={{fontWeight: 'bold'}} /> => [removeStyle color], [addStyle font-weight 'bold'] Code
- 41. List-wise Diff Problematic Case renderA: <div><span>first</span></div> renderB: <div><span>first</span><span>second</span></div> => [insertNode <span>second</span>] Code renderA: <div><span>first</span></div> renderB: <div><span>second</span><span>first</span></div> => [replaceAttribute textContent 'second'], [insertNode <span>first</span>] Code
- 42. List-wise Diff Problematic Case renderA: <div><span>first</span></div> renderB: <div><span>first</span><span>second</span></div> => [insertNode <span>second</span>] Code renderA: <div><span>first</span></div> renderB: <div><span>second</span><span>first</span></div> => [replaceAttribute textContent 'second'], [insertNode <span>first</span>] Code Levenshtein Distance O(n2)
- 43. List-wise Diff Keys renderA: <div><span key="first">first</span></div> renderB: <div><span key="second">second</span><span key="first">first</span></div> => [insertNode <span>second</span>] Code If you specify a key, React is now able to find insertion, deletion, substitution and moves in O(n) using a hash table.
- 44. Trade-offs
- 45. Trade-offs • The algorithm will not try to match sub-trees of different components classes. If you see yourself alternating between two components classes with very similar output, you may want to make it the same class. In practice, we haven't found this to be an issue.
- 46. Trade-offs • The algorithm will not try to match sub-trees of different components classes. If you see yourself alternating between two components classes with very similar output, you may want to make it the same class. In practice, we haven't found this to be an issue. • If you don't provide stable keys (by using Math.random() for example), all the sub-trees are going to be re-rendered every single time. By giving the users the choice to choose the key, they have the ability to shoot themselves in the foot.
- 47. Where to go from here? & Acknowledgements • Official Documentation: https:// facebook.github.io/react/ • React’s diff algorithm: http:// calendar.perfplanet.com/2013/diff/ • React Demystified: http://blog.reverberate.org/ 2014/02/react-demystified.html
- 48. Thanks