Блог

Может ли кто-нибудь объяснить мне основное различие между отображением компонента JSX как функции и как тега. Достигнутый результат тот же, но каким-то образом, если я визуализирую компонент JSX, например <Display/> , показываю мерцание на экране, но визуализация компонента {Display()} работает абсолютно нормально. В обоих случаях компонент повторно визуализируется.

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

 const App = ()=> {
  const Display = ()=>{
   console.log(" === Rendering display ===")
   return (
     <h1> Hello there.. </h1>
   )

  return(
  <div>
    <Display/>
    {Display()}
  </div>

}
 

Причина, по которой это происходит, заключается в том, что вы определяете свой компонент Display изнутри другого компонента (в данном случае App ).

Это анти-шаблон, так как компонент будет переопределен при каждом рендеринге его родительского компонента.

Правильным способом было бы определить эти компоненты отдельно:

 const Display = ()=> {
 console.log(" === Rendering display ===")
 return (
   <h1> Hello there.. </h1>
 );
}

const App = () => {
  return(
  <div>
    <Display/>
    {Display()}
  </div>
  )
}
 

Что касается разницы между обоими методами, вот краткое изложение, взятое из статьи, опубликованной Кентом К. Доддсом на эту тему:

React не знает разницы между вызовом функции в нашем JSX и ее встраиванием. Таким образом, он не может ничего связать с функцией счетчика, потому что она не отображается как компонент.