NestedReact 1.0 beta. Hierarchical Checklist Demo.

Aug 08, 2016 21:50

Пример из NestedReact 1.0 beta, которая сейчас в бранче develop ( Read more... )

reactjs

Leave a comment

Comments 22

kvasdopil August 9 2016, 10:20:15 UTC
Персистенса из коробки в mobx нет, это да. Сериализацию сделать несложно через JSON.stringify(model.toJs()), но десериализации нет, ни быстрой ни медленной)

На mobx вам указывают совершенно справедливо - с точки зрения апи библиотеки практически ничем не отличаются:
Точно так же есть стор (ака @predefine у вас или класс с @observable полями в mobx)
Точно так же компоненты биндятся к стору (через @define у вас или @observer в mobx)
Точно так же есть транзакции для изменения стора (ака @action в mobx)

Я не спорю что на практике у вас там множество нюансов учтено и естественно для ваших требований ваша либа гораздо лучше походит (см ту же сериализацию), но
1) утверждение про "самый простой способ управления состоянием" по крайней мере спорно
2) не очень понятны перспективы использования вашей либы вне компании, при живом-то mobx (и при том что у них версия 2.4 а у вас 0.6)

Что безусловно не отменяет что вы большие молодцы. Если эта технология два года назад у вас уже была то вы очень круты.

Reply

gaperton August 9 2016, 17:50:34 UTC
> Точно так же есть стор (ака @predefine у вас или класс с @observable полями в mobx ( ... )

Reply

kurilka August 9 2016, 19:42:09 UTC
Жжесть, 20 раз редактировать комммент...

Reply

gaperton August 9 2016, 20:31:59 UTC
Я к комментам отношусь серьезно, как к части поста, так что можно и 20 раз. С учетом опечаток. Он за эти 20 раз принципиально не поменялся, не так ли?

ЗЫ: Этот коммент уже редактирован 1 раз.
ЗЗЫ: Вообще - мой коммент, что хочу, то с ним и делаю. Редактировано 2 раза.

Reply


maksenov August 10 2016, 06:07:12 UTC
Прикладываю вариант на mobx.

Принципиальная разница в том, что я вынес корневой стейт в синглтон стор. Можно было его запихать в состояние компонента, но так мне как-то привычнее.

Reaction - грубый аналог watcher в NestedReact с той разницей, что сравнение неглубокое, поэтому реакция натравлена на изменение свойства checked дочерних элементов.

Буду рад дополнительным вопросам.

https://github.com/mikhail-aksenov/mobxChecklist

Reply

gaperton August 10 2016, 21:37:10 UTC
Ага, reaction это аналог watcher и событий 'change'. И транзакции есть, точно так же.

На добавление и удаление одного элемента в массив подписаться можно (если у нас транзакция, и там серия array.push), или только на изменение всего?

И я хочу уточнить про "сравнение не глубокое".

x - это { a : [ { b : 5 } }. Если на месте изменить b, reaction на a не сработает? Но если компонент такое получит через props, и нарисует, то он изменение все-таки заметит?

Reply

maksenov August 11 2016, 02:24:34 UTC
Reaction работает примерно так: в первой функции определяем на что реагировать, а значит если подать только массив, то реакция будет на удаление/добавление - изменение контента не перехватится. Можно сделать autorun - тогда будут трекаться все поля, к которым есть доступ внутри этого autorun, но возможны лишние срабатывания.

Компонент-то заметит, но реакция не запустится, а значит нарисовать он может что-то не то.

Reply

gaperton August 11 2016, 02:51:17 UTC
А если сделать так - то она будет следить и за удалениями-добавлениями, и за изменениями элемента checked. Так?

// Set reaction for checked property of every child
reaction(() => this.children.map(f => f.checked), childrenChecked => {
if (this.children.length)
this.checked = this.isChecked
})

Если мы хотим следить за любым изменением атрибутов объектов массива - это сделать вообще нельзя, или можно как-то?

Reply


gaperton August 10 2016, 20:45:20 UTC
Вот, совсем другое дело. Сразу два примера. И даже один на TypeScript - давно хотел посмотреть, как люди этого готовят. Спасибо, парни! Щаз посмотрим.

Reply


Leave a comment

Up