React Скрытые угрозы Smart JS Academy xanf_ua

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

Smart. JS. Academy xanf_ua

История мира Java. Script

Экосистема react-autocomplete react-tabs react-modal

П Feature coverage q. Server-Side rendering q. Canvas / Web. GL / etc. q. Mobile (React Native) q. JSX & Tools

П Парадигма Component Containers State Store Actions Component 2 Component 4 Middleware Component 5 Component 3 Provider Props Context Component 6 Component 7

П Дьявольски быстрый q. Virtual DOM qshould. Component. Update

П connect( ({ users, fav }) => ({ users, fav }), (dispatch) => ({ actions: { { load. Users, mark. Favorite, select, clear } { load. Users, mark. Favorite } { load. Users } load. Users, mark. Favorite, select, clear }}) )(Friends. List)

П should. Component. Update { actions: { a: function, b: function }} should. Component. Update(next. Props, next. State) { return !shallow. E(this. props, next. Props) || return true; !shallow. E(this. state, next. State); }

П connect #2 connect( { users, fav }) => ({ users, // список пользователей favorite. Users: users. filter(u => users, fav. contains(u. id) // список любимых id ) fav, } )(Friends. List)

П M: Memoization export const fav. Selector = create. Selector( state => state. users, state => state. fav, ( users, fav ) => users. filter( u => fav. contains(u. id) ) ) ; reselect connect(state) => ({ state. users, favorite. Users: fav. Selector(state) })

П : : bind handle. Click = ({target}) => { this. props. set. Checked(target. value); handle. Click({target}) { } this. props. set. Checked(target. value); } render() { //. . . }

П : : bind #2 handle. Click = name => value => { this. props. set. Filter({[name]: value}); } < … on. Click=“this. handle. Click. bind(‘user’) > < … on. Click=“this. handle. Click. bind(‘admin’) >

П M: Memoization qrender не должен порождать новых сущностей qновые сущности очень коварны q[ ], { } qтестируйте свои компоненты

П redux Action 1 Action 2 Action 3 qaction creators qreducers qmiddlewares

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

П Слежение const Perf = require(‘react-addons-perf’); Perf. start(); Perf. end(); Perf. print. Wasted();

Вопросы?