Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

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

Содержание

xanf_ua
ReactСкрытые угрозы xanf_ua История мира JavaScript Экосистемаreact-modalreact-tabsreact-autocomplete П Feature coverageServer-Side renderingCanvas / WebGL / etc.Mobile (React Native)JSX & Tools П ПарадигмаComponentStatePropsComponent 2Component 3Component 4Component 5Component 6Component 7ContainersContextStoreActionsMiddlewareProvider П Дьявольски быстрыйVirtual DOMshouldComponentUpdate П connectconnect( ({ users, fav }) => ({ users, fav П shouldComponentUpdateshouldComponentUpdate(nextProps, nextState) { return true; return !shallowE(this.props, nextProps) || П connect #2connect()(FriendsList){ users, fav }) => ({ // список П M: Memoizationreselect export const favSelector = createSelector( state П ::bindhandleClick({target}) { this.props.setChecked(target.value);}} render() { //... handleClick = ({target}) => { this.props.setChecked(target.value);} П ::bind #2handleClick = name => value => { this.props.setFilter({[name]: П M: Memoization render не должен порождать новых сущностейновые сущности очень П reduxAction 1Action 2Action 3action creatorsmiddlewaresreducers П ?: ??? redux-sagas?redux-thunk?redux-side-effects?redux-effects? П Слежение const Perf = require(‘react-addons-perf’);Perf.start();Perf.end();Perf.printWasted(); Вопросы?
Слайды презентации

Слайд 2 xanf_ua

xanf_ua

Слайд 3 История мира JavaScript

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

Слайд 4 Экосистема
react-modal
react-tabs
react-autocomplete

Экосистемаreact-modalreact-tabsreact-autocomplete

Слайд 5 П Feature coverage
Server-Side rendering
Canvas / WebGL

П Feature coverageServer-Side renderingCanvas / WebGL / etc.Mobile (React Native)JSX & Tools

/ etc.
Mobile (React Native)
JSX & Tools

Слайд 6 П Парадигма
Component
State
Props
Component 2
Component 3
Component 4
Component 5
Component

П ПарадигмаComponentStatePropsComponent 2Component 3Component 4Component 5Component 6Component 7ContainersContextStoreActionsMiddlewareProvider

6
Component 7
Containers
Context
Store
Actions
Middleware
Provider

Слайд 7 П Дьявольски быстрый
Virtual DOM

shouldComponentUpdate

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

Слайд 8 П connect
connect(
({ users, fav })

П connectconnect( ({ users, fav }) => ({ users, fav

=> ({ users, fav }),

{ loadUsers }

)(FriendsList)


{ loadUsers, markFavorite }


{ loadUsers, markFavorite, select, clear }

(dispatch) => ({ actions: {
loadUsers, markFavorite, select, clear
}})

Слайд 9 П shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
return

П shouldComponentUpdateshouldComponentUpdate(nextProps, nextState) { return true; return !shallowE(this.props, nextProps) ||

true;

return !shallowE(this.props, nextProps) ||


!shallowE(this.state, nextState);

}

{ actions: { a: function, b: function }}

Слайд 10 П connect #2
connect(
)(FriendsList)
{ users, fav })

П connect #2connect()(FriendsList){ users, fav }) => ({ // список

=> ({
// список пользователей
users,
// список любимых

id
fav,
}

{ users, fav }) => ({
users,
favoriteUsers: users.filter(u =>
fav.contains(u.id)
)
}

Слайд 11 П M: Memoization
reselect 
export const favSelector =

П M: Memoizationreselect export const favSelector = createSelector( state => state.users,


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);
}
}

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

/>
render() {
//...


handleClick

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

Слайд 13 П ::bind #2
handleClick = name =>

П ::bind #2handleClick = name => value => { this.props.setFilter({[name]:

value => {
this.props.setFilter({[name]: value});
}
< … onClick=“this.handleClick.bind(‘user’) >

< … onClick=“this.handleClick.bind(‘admin’) >

Слайд 14 П M: Memoization
 

render не должен порождать

П M: Memoization render не должен порождать новых сущностейновые сущности очень

новых сущностей
новые сущности очень коварны
[ ], { }
тестируйте свои

компоненты

Слайд 15 П redux
Action 1
Action 2
Action 3
action creators

middlewares

reducers

П reduxAction 1Action 2Action 3action creatorsmiddlewaresreducers

Слайд 16 П ?: ???
 

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

П ?: ??? redux-sagas?redux-thunk?redux-side-effects?redux-effects?

Слайд 17 П Слежение
 
const Perf = require(‘react-addons-perf’);
Perf.start();
Perf.end();
Perf.printWasted();

П Слежение const Perf = require(‘react-addons-perf’);Perf.start();Perf.end();Perf.printWasted();
  • Имя файла: react.pptx
  • Количество просмотров: 193
  • Количество скачиваний: 0
- Предыдущая Четырехугольники
Следующая - Правильное питание школьников

Похожие презентации

ОСВЕЩЕНИЕ РЕСТОРАНА ОСВЕЩЕНИЕ РЕСТОРАНА 106
Творческая мастерская для Женщин Счастье своими руками Творческая мастерская для Женщин Счастье своими руками 87
Головоломки по математике. 1класс. Сложение и вычитание в пределах 10 Головоломки по математике. 1класс. Сложение и вычитание в пределах 10 91
Евро стандарты топлива Евро стандарты топлива 106
Памятки для родителей презентация к уроку Памятки для родителей презентация к уроку 114
Социальный проект презентация к занятию (подготовительная группа) Социальный проект презентация к занятию (подготовительная группа) 87
Получение государственных и муниципальных услуг в электронном виде Получение государственных и муниципальных услуг в электронном виде 77
Образовательный маршрут (web-навигатор) Как в старину на Руси весну встречали презентация Образовательный маршрут (web-навигатор) Как в старину на Руси весну встречали презентация 89
Современные условия обмена технологиями, технологические лидеры Современные условия обмена технологиями, технологические лидеры 99
Русская береза проект (подготовительная группа) Русская береза проект (подготовительная группа) 105
АТЖ-нің құрылу принципі АТЖ-нің құрылу принципі 129
Пословицы и поговорки об учёбе. материал по теме Пословицы и поговорки об учёбе. материал по теме 96
Инфекционные заболевания ЦНС Инфекционные заболевания ЦНС 73
С НОВЫМ ГОДОМ! презентация к уроку (1 класс) С НОВЫМ ГОДОМ! презентация к уроку (1 класс) 27
Протоколы маршрутизации Протоколы маршрутизации 82
Социализация личности Социализация личности 61
Реализация права и их признаки Реализация права и их признаки 96
Прогулка по Парижу Прогулка по Парижу 119
Характеристика неметаллов Характеристика неметаллов 82
Презентация Кризис трех лет презентация к занятию (младшая группа) по теме Презентация Кризис трех лет презентация к занятию (младшая группа) по теме 89
Найди 10 отличий Найди 10 отличий 65
Презентация к уроку Изучение шахматной фигуры Слон презентация к уроку (1 класс) Презентация к уроку Изучение шахматной фигуры Слон презентация к уроку (1 класс) 105
Аналитический отчет за 2015-2016 учебный год презентация к уроку (подготовительная группа) Аналитический отчет за 2015-2016 учебный год презентация к уроку (подготовительная группа) 144
Illustrated drilling glossary Illustrated drilling glossary 124
Моделирование систем автоматического управления Моделирование систем автоматического управления 97
Презентация урока по форме прожектор библиотеки Мировые знаменитости Презентация урока по форме прожектор библиотеки Мировые знаменитости 114
Мастер-класс Использование документ-камеры при изготовлении творческого проекта презентация к уроку Мастер-класс Использование документ-камеры при изготовлении творческого проекта презентация к уроку 97
Презентация к учебному проекту Модели из конструктора для декораций мультфильмов (Исследования, выполненные в ходе работы в школьных кружках) Презентация к учебному проекту Модели из конструктора для декораций мультфильмов (Исследования, выполненные в ходе работы в школьных кружках) 82
Презентация по ВИЧ, СПИД Презентация по ВИЧ, СПИД 116
Криминалистическая диагностика татуировок Криминалистическая диагностика татуировок 116