Функциональный компонент рендерит один раз, компонент класса рендерит дважды

Question

Итак, я запустил этот новый проект с помощью create-реагировать на приложение (оно работает по реакции v.16.13.1). Я переписал базовый компонент приложения как класс и обнаружил, что когда компонент является функцией, например:

function App() {
  console.log('App (function)');
  return 'App (function)';
}

консоль браузера выводит на печать

App (function)

Отлично, спасибо ! Но если тот же компонент приложения записан как

class App extends React.Component {
  render() {
    console.log('App (class)');
    return 'App (class)';
  }
}

, консольная запись

App (class)
App (class)

Answer 1

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

Из документов (выделено моё):

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

• Конструктор компонента класса, рендеринг и shouldComponentUpdate методы
• Компонент класса stati c метод getDerivedStateFromProps
• Тела компонентов функций
• Функции средства обновления состояния (первый аргумент для setState)
• Функции, передаваемые для useState, useMemo или useReducer

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

В моем тестировании работа в режиме производства не сделала не , что привело к одинаковому двойному рендерингу компонента класса.