Блог

 function App(props) {
   console.log('test rendering?');
   return <div>app content more components inside</div>
}
 

Сообщение с консоли.журнал отображается каждый раз, когда что-то отображается, должно ли это работать таким образом?

ДА. React будет вызывать функцию каждый раз, когда ей необходимо выполнить повторный рендеринг. Возьмите следующее:

 const Foo = () => {
  const [bar, setBar] = useState(0);
  console.log('Rendering Foo');
  return <div onClick={() => setBar(bar   1)}>{bar}</div>
}
 

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

Редактировать: стоит отметить, что React не будет вызывать функцию, если в этом нет необходимости. Например:

 const Wrapper = () => {
  const MyFoo = <Foo />;
  const shouldUseFoo = false;

  return <div>{shouldUseFoo amp;amp; MyFoo}</div>;
};
 

Журнал консоли здесь не сработает, потому что компонент не требуется для конечного рендеринга.