?

Log in

November 2016   01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
cartoon

NestedReact 1.0 beta. Hierarchical Checklist Demo.

Posted on 2016.08.08 at 21:50

Comments:


Трещиноватые коллекторы. Инструкция.
maksenov at 2016-08-10 06:07 (UTC) (Link)
Прикладываю вариант на mobx.

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

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

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

https://github.com/mikhail-aksenov/mobxChecklist
Gaperton
gaperton at 2016-08-10 21:37 (UTC) (Link)
Ага, reaction это аналог watcher и событий 'change'. И транзакции есть, точно так же.

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

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

x - это { a : [ { b : 5 } }. Если на месте изменить b, reaction на a не сработает? Но если компонент такое получит через props, и нарисует, то он изменение все-таки заметит?
Трещиноватые коллекторы. Инструкция.
maksenov at 2016-08-11 02:24 (UTC) (Link)
Reaction работает примерно так: в первой функции определяем на что реагировать, а значит если подать только массив, то реакция будет на удаление/добавление - изменение контента не перехватится. Можно сделать autorun - тогда будут трекаться все поля, к которым есть доступ внутри этого autorun, но возможны лишние срабатывания.

Компонент-то заметит, но реакция не запустится, а значит нарисовать он может что-то не то.
Gaperton
gaperton at 2016-08-11 02:51 (UTC) (Link)
А если сделать так - то она будет следить и за удалениями-добавлениями, и за изменениями элемента 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
        })


Если мы хотим следить за любым изменением атрибутов объектов массива - это сделать вообще нельзя, или можно как-то?
Трещиноватые коллекторы. Инструкция.
maksenov at 2016-08-11 03:57 (UTC) (Link)
Так - да, потому что будет изменяться и количество элементов в массиве, и свойство.

Это можно сделать через autorun, но в reaction более тонкий контроль.
Gaperton
gaperton at 2016-08-10 21:41 (UTC) (Link)
Еще вопрос - а в состояние компонента его как запихать? Очень интересно посмотреть, как оно после этого будет рендериться.

Кстати, сейчас оно, в отличии от другого примера, каждый раз рендерит корневой элемент при любом изменении. Почему так? Что на это влияет?
Трещиноватые коллекторы. Инструкция.
maksenov at 2016-08-11 05:46 (UTC) (Link)
По поводу состояния я еще посмотрю.

Ререндер скорее всего из-за того, что у меня в ElementStore root - @observable, а в другом примере просто переменная. Можно просто объявить его const в index.tsx и посмотреть что там и куда.
Gaperton
gaperton at 2016-08-10 22:34 (UTC) (Link)
Еще вопрос про TypeScript. Какова обычная практика его использования с React - tsx-файлы аннотируют типами, или только слой данных?
Трещиноватые коллекторы. Инструкция.
maksenov at 2016-08-11 02:47 (UTC) (Link)
Здесь я не слишком сильно заморачивался, если честно, но на работе мы аннотируем и tsx достаточно для того, чтобы не путаться (то есть any есть, но только когда совсем припрет). Самые большие проблемы с аннотациями в компонентах у меня возникают при интеропе с жс либами, например с Leaflet (у него были некорретные тайпинги) и HandsonTable (который вообще весьма забавен).

Например, List в рабочем проекте я перепишу так:

const List = ((props: {
    elements: Element[]
}) => {
    return (
        <div className='children'>
            {_.map(props.elements, item => <Item key={uuid.v4()} element={item} />)}
        </div>
    )
})
Previous Entry  Next Entry