Презентация на тему "React"

Содержание

• 
  Слайд 1

  React

  Скрытые угрозы

• 
  Слайд 2
  

  SmartJS.Academy xanf_ua

• 
  Слайд 3

  История мира JavaScript

• 
  Слайд 4

  Экосистема

  react-modal react-tabs react-autocomplete

• 
  Слайд 5

  П Feature coverage

  Server-Side rendering Canvas / WebGL / etc. Mobile (React Native) JSX & Tools

• 
  Слайд 6

  П Парадигма

  Component State Props Component 2 Component 3 Component 4 Component 5 Component 6 Component 7 Containers Context Store Actions Middleware Provider

• 
  Слайд 7

  П Дьявольски быстрый

  Virtual DOM shouldComponentUpdate

• 
  Слайд 8

  П connect

  connect( ({ users, fav}) => ({ users, fav }), { loadUsers} )(FriendsList) { loadUsers, markFavorite} { loadUsers, markFavorite, select, clear } (dispatch) => ({ actions: { loadUsers, markFavorite, select, clear }})

• 
  Слайд 9

  П shouldComponentUpdate

  shouldComponentUpdate(nextProps, nextState){ returntrue; return!shallowE(this.props,nextProps)|| !shallowE(this.state,nextState); } { actions: { a: function, b: function }}

• 
  Слайд 10

  П connect #2

  connect( )(FriendsList) { users, fav }) => ({ // список пользователей users, // список любимых id fav, } { users, fav }) => ({ users, favoriteUsers: users.filter(u => fav.contains(u.id) ) }

• 
  Слайд 11

  П M: Memoization

  reselect  export constfavSelector = createSelector( state => state.users, state => state.fav, ( users, fav ) => users.filter( u => fav.contains(u.id) ) ) ; connect(state) => ({ state.users, favoriteUsers: favSelector(state) })

• 
  Слайд 12

  П ::bind

  handleClick({target}) { this.props.setChecked(target.value); } } render() { //... handleClick = ({target}) => { this.props.setChecked(target.value); }

• 
  Слайд 13

  П ::bind #2

  handleClick= name => value => { this.props.setFilter({[name]: value}); }

• 
  Слайд 14

  П M: Memoization

    render не должен порождать новых сущностей новые сущности очень коварны [ ], { } тестируйте свои компоненты

• 
  Слайд 15

  П redux

  Action 1 Action 2 Action 3 action creators middlewares reducers

• 
  Слайд 16

  П ?: ???

    redux-sagas? redux-thunk? redux-side-effects? redux-effects?

• 
  Слайд 17

  П Слежение

    const Perf = require(‘react-addons-perf’); Perf.start(); Perf.end(); Perf.printWasted();

• 
  Слайд 18

  Вопросы?