React-Einführung

 React-Einführung

React-Einführung auf dem TYPO3Camp Mitteldeutschland mit Live Programming.

Video: https://www.youtube.com/watch?v=mUjjh4ic24k&t=538

30c0b6f50f67163bee8500aa4115d126?s=128

Sebastian Kurfürst

January 26, 2019
Tweet

Transcript

  1. 4.
  2. 7.
  3. 10.
  4. 11.

    DOM = react(state) newState = f(oldState, action) ACTIONS Reselect Selectors

    VIEW CONTAINER COMPONENT COMPONENT COMPONENT STATE STORE
  5. 12.
  6. 13.
  7. 14.
  8. 20.

    DOM = Document Object Model browser DOM is slow abstraction

    of the DOM to reduce number of operations internal performance optimization *virtual DOM
  9. 22.

    *reselect 1 const contextForNodeLinking = createSelector( 2 [ 3 $get('currentlyEditedUserId'),

    4 $get('users') 5 ], 6 function( 7 currentlyEditedUserId, 8 users 9 ){ 10 return users[currentlyEditedUserId]; 11 } 12 );
  10. 24.

    Wartbarkeit Pure Functions Immutability reselect Stabilität Pure Functions Immutability Performance

    Pure Functions Immutability virtual DOM reselect Erweiterbarkeit
  11. 26.
  12. 27.

    class SideBar extends Component { shouldComponentUpdate(nextProps) { // somehow compare

    nextProps and this.props, // and return true if update is needed } }
  13. 28.

    state data UI sidebar collapsed = true ... ... ...

    state.UI.sidebar.collapsed = false collapsed = false deep comparison needed! mutating state
  14. 29.

    state data UI sidebar collapsed = true ... ... ...

    sidebarState = {...sidebarState, collapsed: false}; uiState = {...uiState, sidebar: sidebarState}; state = {...state, ui: uiState}; collapsed = false reference comparison is enough! immutable state sidebar UI state !! great performance !!
  15. 32.

    embrace PureComponent class SideBar extends PureComponent { // - component

    is like a pure function, // depending only on its input props. // - Automatically shallowly compares // props by reference (like we have // just seen) }
  16. 34.
  17. 36.
  18. 38.

    *reselect 1 const contextForNodeLinking = createSelector( 2 [ 3 $get('currentlyEditedUserId'),

    4 $get('users') 5 ], 6 function( 7 currentlyEditedUserId, 8 users 9 ){ 10 return users[currentlyEditedUserId]; 11 } 12 );
  19. 39.
  20. 40.
  21. 42.
  22. 44.