MobX делает это за меня?

Question

[Gary_Ihar]

Привет всем.
Ожидает меня таблица с большим кол-вом строк. В каждой строке будет по input и надо мне данные собирать с этих инпутов. Ну чтобы это все работало не тормозя, я оборачивал каждую строку в свой стор, полагаясь, что рендер будет происходить ток в том месте, где собственно происходят изменения. Нагородил кода, но потом решил почему-то попробовать без "мелких сторов" и предоставил все MobX на самотек(скормил ему массив с 50000 объектами), и он справился, он делает ровно тоже самое без сторов. Теперь вопрос, как?
Полез в доку, там есть

By default, observable is applied recursively. If one of the encountered values is an object or array, that value will be passed through observable as well.

Значит ли все это, что если в

массиве

const a = [
  {a: 'title1'},
  {a: 'title2'}
]

на каждый объект навесится "отдельный" наблюдатель. И если изменится ток второй объект, то перерендерится та компонента, которая использует данные этого объекта?

П.С. Я качал репу MobX, смотрел в исходники. Сложно, надо много времени потратить чтобы въехать

Answer 1

[Alexandroppolus]

Да, по умолчанию весь объект рекурсивно делается наблюдаемым. То есть можно отслеживать изменение a[i], и a[i].a

Тут главное - правильно читать и записывать значения.

Например, у тебя такой расклад:

<Table>{a.map(item => <Row key={item.id} item={item} />)}</Table>

Если ты делаешь a[i].a = newValue, то перерендерится только один Row
А если a[i] = {...}, то уже весь компонент, в котором цикл (хотя все Row, кроме измененного, не перерендериваются внутри себя).

Ещё плохой вариант:

<Table>{a.map(item => <Row key={item.id} a={item.a} />)}</Table>

здесь даже при a[i].a = newValue будет как при a[i] = {...}, потому что компонент с циклом подписывается на все a[i].a, а не только на все a[i]