MobX computed - согласование цепочки вычисленных значений

Question

У меня есть три связанных вопроса о лучших практиках с «computed».

TL; DR: Что мне нужно подумать о себе и что примирение делает из коробки.

Допустим, я загружаю здоровенный набор данных в переменную данных:

data = asyncComputed( await fetch … return data )

У меня есть удобная вычисляемая подпорка, которая форматирует эти данные:

@computed get timeseries() {
    const data = this.data.get()

    const timeseries = nest()
      .key(d => d.geo)
      .entries(data)

    return timeseries
  }

И третья удобная подпорка, рассчитанная навершина временных рядов:

  @computed get extentX() {
    const timeseries = this.timeseries.get()
    const extentX = extent(timeseries, d => d.time)
    return extentX
  }

1. Существует ли риск того, что рендеринг произойдет до того, как будут выполнены все эти вычисления, или MobX гарантирует, что это было согласовано раньше?

2. Есть ли лучший способ структурировать этот код, чтобы избежать цепочки вычисляемых реквизитов?

3. Допустим, первый асинхронный вызов запускается при изменении свойства (id) наобъект и что этот объект позже обновляется из той же цепочки событий:

variable = { id : “my-variable”, extent: undefined} 

data = asyncComputed( await fetch api?id=variable.id ) 

=> вычисляет экстент => приводит к переменной. extent = [200, 400] Есть лириск того, что это может вызватьбесконечный цикл или безопасно обновить свойство объекта, как это?

Answer 1

вот мои мысли по этой теме.

1. Mobx Запускает все вычисления синхронно ( Prof см. Синхронное выполнение )
2. Mobx выполняет ленивую оценку ( Проф. См. Ленивая и реактивная оценка )
3. При применении @observer он просто оборачивает функцию рендеринга в autorun ( Доказательство )

Из # 1 мы можем сделать вывод, что если у нас есть цепочка вычислений, они оцениваются синхронно, как: observable -> computed 1 -> computed 2

Из # 2 мы можем сказать, что для запуска побочного эффекта - эта вычисленная цепочка будетдолжен закончиться автозапуском observable -> computed 1 -> computed 2 -> autorun

Это уже приводит нас к пункту № 3.Это @observer - это HOC, который оборачивает ваш Компонент и контролирует каждый раз, когда его необходимо перерисовать.Теперь это не находится под контролем вашего компонента.

Итак, отвечая на ваши вопросы:

1. Нет риска, что визуализация произойдет между вычисленными вычислениями.Это произойдет после того, как последний computed вызовет autorun
2. Цепочка computed является мощным подходом, и его не следует избегать, просто используйте wizdomly.

Из документов:

Путем составления реактивных вычислений можно даже автоматически преобразовать один граф данных в другой граф данных и поддерживать этот вывод в актуальном состоянии с помощьюминимальное количество патчей.Это упрощает реализацию сложных шаблонов, таких как уменьшение карты, отслеживание состояний с использованием неизменяемых общих данных или боковая загрузка данных.

Моб имеет защиту от петель.Вы увидите консольную ошибку, что изменение наблюдаемых, вызвавших поток, не допускается