Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Inside React: Then and Now

Ecc4e1105a184257c37a02c59f155fc2?s=47 Tianyu Pu
November 16, 2018

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.

Ecc4e1105a184257c37a02c59f155fc2?s=128

Tianyu Pu

November 16, 2018
Tweet

Transcript

  1. Inside React: Then and Now Tianyu (Tian) Pu

  2. None
  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

  58. None
  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