Блог

Главная - Вопросы по программированию - Почему компоненты React рендерятся дважды при использовании observer()?

Почему компоненты React рендерятся дважды при использовании observer()?

#mobx #mobx-react

#mobx #mobx-реагировать

Вопрос:

Простое обертывание компонентов React с помощью observer() , похоже, приводит к тому, что они отображаются дважды. Каковы могут быть возможные причины этого? Я использую последние версии react 16.8.3, mobx 5.9.4 и mobx-react-lite 1.2.0

Например:

 import React from "react";
import { observer } from "mobx-react-lite";

const Item = observer(() => {
  return (
    <div>
      {console.log("render item")}
      Item
    </div>
  );
});

export default Item;

Это происходит в относительно сложном приложении. Я заметил поведение при отладке другой проблемы. Затем я удалил как можно больше кода и смог воспроизвести проблему в очень простом случае.

РЕДАКТИРОВАТЬ: Смотрите ответ ниже. Я смог определить проблему, попытавшись выполнить репозиторий с использованием codesandbox.

Ответ №1:

Я должен был закончить codesandbox, над которым я работал, прежде чем публиковать вопрос, хотя это может избавить кого-то другого от боли и потерянного времени. Оказывается, причина, по которой происходят двойные рендеринги, заключается в том, что я использую React.StrictMode . Интересно, что двойное отображение с помощью React.StrictMode , похоже, происходит только тогда, когда компонент обертывается с помощью observer() Вот codesandbox. React.StrictMode используется во всем приложении (index.js ) и если удалить, двойной рендеринг прекращается.