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

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

Sebastian Kurfürst

January 26, 2019
Tweet

More Decks by Sebastian Kurfürst

Other Decks in Technology

Transcript

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

    VIEW CONTAINER COMPONENT COMPONENT COMPONENT STATE STORE
  2. DOM = Document Object Model browser DOM is slow abstraction

    of the DOM to reduce number of operations internal performance optimization *virtual DOM
  3. *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 );
  4. Wartbarkeit Pure Functions Immutability reselect Stabilität Pure Functions Immutability Performance

    Pure Functions Immutability virtual DOM reselect Erweiterbarkeit
  5. class SideBar extends Component { shouldComponentUpdate(nextProps) { // somehow compare

    nextProps and this.props, // and return true if update is needed } }
  6. state data UI sidebar collapsed = true ... ... ...

    state.UI.sidebar.collapsed = false collapsed = false deep comparison needed! mutating state
  7. 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 !!
  8. 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) }
  9. *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 );