Post on 26-Jul-2020
MobX
Шаповалов В.
MobX
Simple, scalable state management
2
Давайте разберёмся
3
React
• State
• Props
4
TODO list
App
TodoList
AddTodo
TodoItem
TodoItem
TodoItem
5
State management?
• View
• URL
• Local storage
• Cookies
• …
6
Состояние – это дерево
7
Состояние – это живое дерево
8
Как отслеживать изменения состояния?
9
Ручная подписка на изменения
1. Используем текущее состояние
2. Подписываемся на изменения
3. Реагируем на изменения
10
Ручная подписка на изменения
render(state);
state.on(‘change’, () => {
render(state);
});
11
Проблемы ручной подписки
• Переподписка: отслеживание изменения всего дерева избыточно.
• Недоподписка: отслеживание отдельных полей в конце концов ведёт к неконсистентности.
12
MobX
автоматическая _
MobX – автомагическая подписка
13
Философия MobX
Anything that can be derived from the application state, should be derived. Automatically.
14
Основные понятия
• Observable
• Computed
• Actions
• Reactions
15
@observable
class Person {
...
@observable firstName = ‘Ivan’;
@observable lastName = ‘Ivanov’;
@observable nickName;
...
}
16
@computed
class Person {
...
@computed get fullName() {
return this.firstName + ‘ ’ + this.lastName;
}
...
}
17
@computed
Computed зависит от исходных данных и возвращает производные данные
18
@action
class Person {
...
@action setNickName(nickName) {
this.nickName = nickName;
}
...
}
19
Reactions
• Не возвращают результат
• Дают побочный эффект
20
Reactions
Реакции срабатывают при каждом изменении исходных данных, от которых они зависят
21
autorun
22
autorun(() => {
console.log(person.nickName || person.fullName);
});
autorun
23
autorun(() => {
console.log(person.nickName || person.fullName);
});
autorun
24
autorun(() => {
console.log(person.nickName || person.fullName);
});
@computed
class Person {
...
@computed get fullName() {
return this.firstName + ‘ ’ + this.lastName;
}
...
}
25
Наблюдаемые поля
> person.nickName
> person.fullName
> person.firstName
> person.lastName
26
Дерево зависимостей
27
firstName
lastName
nickName
fullName
autorun
Уведомление об изменении данных
28
person.setNickName(‘Aloha’);
@action
class Person {
...
@action setNickName(nickName) {
this.nickName = nickName;
}
...
}
29
autorun
30
autorun(() => {
console.log(person.nickName || person.fullName);
});
autorun
31
autorun(() => {
console.log(person.nickName || person.fullName);
});
Наблюдаемые поля
> person.nickName
Ненаблюдаемые поля
> person.fullName
> person.firstName
> person.lastName
32
Дерево зависимостей
33
firstName
lastName
nickName
fullName
autorun
autorun
Autorun при каждом выполнении заново собирает список зависимостей
34
@observer
35
@observer
class ProfileView extends React.Component {
render() {
const person = { this.props };
if(person.nickName) {
return <div>{person.nickName}</div>;
}
return <div>{person.fullName}</div>;
}
}
@observer
36
@observer
class SomeComponent extends React.Component {
render() {
if(!this.props.isEnabled) {
return null;
}
... много кода ...
}
}
Динамическая подписка позволяет кардинально минимизировать количество перерисовок React-компонента
37
Если React экономит нам операции с DOM, то MobX экономит нам операции с виртуальным DOM.
38
Кэширование @computed
• Оно есть
• Кэширование происходит, пока есть хотя бы один подписчик
• Если подписчиков нет, кэш выкидывается, а @computedработает как обычный геттер
39
MobX vs Redux
40
Redux
• ООП -> функциональное программирование
• Модели -> immutable-структуры
• Методы -> экшены + редьюсеры
• Связи -> нормализация + селекторы
41
MobX
• Минимум boilerplate
• Автоматическая подписка в рантайме
• Производительность из коробки
42
Что ещё?
• DevTools
• mobx-utils
• mobx-state-tree
43
Бонус
• React Context Api
44
React Context API
• Обновлён в React 16.3
• Теперь открыт для использования (официально)
45
React Context API
• React.createContext
• Provider
• Consumer
46
React Context API
• Назначение – избавление от «props hell»
• Следует использовать, когда приложение ещё слишком мало, а прокидывать props уже надоело.
47
Ссылки
• https://mobx.js.org/
• MobX: управление состоянием без боли https://www.youtube.com/watch?v=yU_hJ2trMg4
• Redux против React Context API https://habr.com/ru/post/419449/
• Редакс в реальной жизни https://iamakulov.com/talks/redux-in-real-life/
48