Mobx @computed вызывается повторно, даже если возвращаемое значение является тем же экземпляром объекта

Я использую компонент React Virtualized <Autosizer> и убедился, что его удаление приводит к исчезновению неожиданного поведения.

https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

Мой @computed выглядит просто так:

foo=[];

@computed get filteredCollection() {
    return this.foo;
}

Почему я наблюдаю такое поведение? При каких обстоятельствах это значение нет будет кэшироваться mobx и просто возвращаться без вызова функции?

Вызывает неожиданное поведение:

<AutoSizer>
    {this.renderTable}
</AutoSizer>

Не вызывает неожиданного поведения:

{this.renderTable({ width: 200, height: 200 })}

(filteredCollection используется renderTable)

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
88
1

Ответы 1

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

Исправление состоит в том, чтобы убедиться, что вычисленное в это время используется где-то еще, или используйте опцию keepAlive.

Другие вопросы по теме