Inside React: Then and Now

React is a popular library for building user interfaces, well-known for encouraging the breakdown of code into components, as well as declarative rendering (especially in conjunction with ES6). What's less well-known is how it works under the hood. In this talk we'll go into the guts of React, how it actually works, what React Fiber is, why it was necessary, and how it affects React applications going forward.

Transcript

1. Inside React: Then and Now Tianyu (Tian) Pu
3. Back to the basics
4. <div> <button>Click me!</button> <p>{text}</p> </div>
5. <div> <button>Click me!</button> <p>{text}</p> </div> const sillyDiv = ({ text }) => ( )
6. <div> <button>Click me!</button> <p>{text}</p> </div>
7. <div> <button>Click me!</button> <p>{text}</p> </div>
8. <div> <button>Click me!</button> <p>{text}</p> </div> class SillyDiv extends React.Component { }
9. <div> <button>Click me!</button> <p>{text}</p> </div> class SillyDiv extends React.Component { render() { return ( ) } }
10. <div> <button>Click me!</button> <p>{this.props.text}</p> </div> class SillyDiv extends React.Component { render() { return ( ) } }
11. <div> <button>Click me!</button> <p>{this.props.text}</p> </div> class SillyDiv extends React.Component { render() { return ( ) } }
12. <div> <button >Click me!</button> <p>{this.props.text}</p> </div> class SillyDiv extends React.Component { render() { return ( ...
13. <div> <button onClick={ } >Click me!</button> <p>{this.props.text}</p> </div> class SillyDiv extends React.Component { render() { return ( ...
14. <div> <button onClick={() => this.setState({ })} >Click me!</button> <p>{this.props.text}</p> </div> class SillyDiv extends React.Component { render() { return ( ...
15. <div> <button onClick={() => this.setState({ text: new Date().toString() })} >Click me!</button> <p>{this.props.text}</p> </div> class SillyDiv extends React.Component { render() { return ( ...
16. <div> <button onClick={() => this.setState({ text: new Date().toString() })} >Click me!</button> <p>{this.props.text}</p> </div> class SillyDiv extends React.Component { render() { return ( ...
17. <div> <button onClick={() => this.setState({ text: new Date().toString() })} >Click me!</button> <p>{this.state.text}</p> </div> class SillyDiv extends React.Component { render() { return ( ...
18. <div> <button onClick={() => this.setState({ text: new Date().toString() })} >Click me!</button> <p>{this.state.text}</p> </div> class SillyDiv extends React.Component { render() { return (
19. <SillyDiv />
20. <SillyDiv />, document.getElementById('root')
21. ReactDOM.render( <SillyDiv />, document.getElementById('root') );
22. “Tell me what you want to see,
23. “Tell me what you want to see, and I’ll make it happen.”
24. Reconciliation
25. Rendering
26. Before React 16
27. ReactDOM.render( <SillyDiv />, document.getElementById('root') );
28. ReactDOM.render( <SillyDiv />, document.getElementById('root') );
29. <div> <button onClick=...>Click me!</button> <p>{this.state.text}</p> </div>
30. Components: host vs composite
31. ReactDOM.render( <SillyDiv />, document.getElementById('root') );
32. <div> <button onClick=...>Click me!</button> <p>{this.state.text}</p> </div>
33. function mount(component) { }
34. function mount(component) { if (host component) // create DOM node // mount children }
35. function mount(component) { if (host component) // create DOM node // mount children if (composite component) // call render() of component // mount the result of render() }
36. What happens if I call ReactDOM.render() again?
37. SillyDiv
38. div button p SillyDiv
39. div button p SillyDiv mount() mount() mount() mount()
40. class DOMComponent { } class CompositeComponent { }
41. class DOMComponent { mount() } class CompositeComponent { mount() }
42. class DOMComponent { currentElement mount() } class CompositeComponent { currentElement mount() }
43. class DOMComponent { currentElement renderedChildren mount() } class CompositeComponent { currentElement renderedElement mount() }
44. class DOMComponent { currentElement renderedChildren node mount() } class CompositeComponent { currentElement renderedElement publicInstance mount() }
45. A word about terminology...
46. class DOMComponent { currentElement renderedChildren node mount() } class CompositeComponent { currentElement renderedElement publicInstance mount() }
47. So, what about updates?
48. class DOMComponent { currentElement renderedChildren node mount() } class CompositeComponent { currentElement renderedElement publicInstance mount() }
49. class DOMComponent { currentElement renderedChildren node mount() receive(nextEl) } class CompositeComponent { currentElement renderedElement publicInstance mount() receive(nextEl) }
50. function receive(nextEl) { }
51. function receive(nextEl) { // figure out next rendered element // if same type, call receive() // otherwise, make changes }
52. function receive(nextEl) { // figure out next rendered element // if same type, call receive() // otherwise, make changes }
53. function receive(nextEl) { // figure out next rendered element // if same type, call receive() // otherwise, make changes }
54. What could possibly go wrong?
55. div button p SillyDiv
56. div button p SillyDiv Box ... ... ...
57. The JS event loop
59. render paint process messages
60. render paint process messages div button p SillyDiv
61. render paint process messages ... ... ...
62. render paint process messages ... ... ...
63. What have we learned about React <16?
64. React 16: “Fiber”
65. isfiberreadyyet.com
66. Core idea: Separate renconciliation from rendering
67. “Render” vs “commit” phases
68. What is a fiber?
69. { }
70. { stateNode }
71. { stateNode child }
72. { stateNode child sibling }
73. { stateNode child sibling return }
74. Representing components with fibers
75. div button p SillyDiv
76. div button p SillyDiv CompositeComponent DOMComponent
77. div button p SillyDiv fiber fiber fiber fiber
78. div button p SillyDiv child
79. div button p SillyDiv child return
80. div button p SillyDiv child return child
81. div button p SillyDiv child return child sibling
82. div button p SillyDiv child return child sibling return return
83. Life of an update
84. div button p SillyDiv
85. div button p SillyDiv setState()
86. div button p SillyDiv updateQueue
87. div button p SillyDiv updateQueue scheduleWork()
88. requestIdleCallback
89. div button p SillyDiv
90. div button p SillyDiv
91. div button p SillyDiv
92. div button p SillyDiv
93. div button p SillyDiv
94. div button p SillyDiv
95. div button p SillyDiv
96. div button p SillyDiv
97. div button p SillyDiv
98. div button p SillyDiv workInProgress
99. div button p SillyDiv div button p SillyDiv workInProgress current
100. div button p SillyDiv div button p SillyDiv current workInProgress
101. Great, but so what?
102. div button p SillyDiv workInProgress
103. div button p SillyDiv workInProgress
104. div button p SillyDiv workInProgress
105. div button p SillyDiv workInProgress
106. div button p SillyDiv New work arrives workInProgress
107. div button p SillyDiv Example 1: High priority update workInProgress
108. div button p SillyDiv workInProgress updateQueue
109. div button p SillyDiv workInProgress updateQueue scheduleWork()
110. div button p SillyDiv Example 2: Animation update workInProgress
111. How far we’ve come
112. Thank you! https://linkedin.com/in/tianyupu https://speakerdeck.com/tianyupu/ inside-react-then-and-now
113. Credits https://github.com/acdlite/react-fiber-architecture https://www.youtube.com/watch?v=ZCuYPiUIONs