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

import { useState } from "react";
console.log("hey i am outside the function declaration");
export default function App() {
  const [count, setCount] = useState(0);
  console.log("hey i am above return");
  return (
    <div>
      value : {count}
      {console.log("hey i am ui ")}
      <button onClick={() => setCount(count + 1)}>click me</button>
    </div>
  );
}

Приведенный выше код прост, но можете ли вы угадать вывод консоли?

или я должен сделать это более сложным?

давайте посмотрим на приведенный ниже код с хуками useEffect

import {useEffect, useState} from 'react'
console.log("hey i am outside the function declaration");
export default function App() {
  const [count, setCount] = useState(0)
  console.log("hey i am above return");
  useEffect(()=>{console.log("hey i am useeffect 1")
return ()=>{
  console.log("hey i useeffect return");}

},[])
  return (
  <div>value : {count}
  {console.log("hey i am ui ")}
    <button onClick={()=>setCount(count+1)}>click me</button>
    </div>);
}

Так что теперь все будет сложно ,
если вы не можете прийти с решением , позвольте мне задать вам один вопрос

Какой будет первая строка в консоли, когда этот экземпляр компонента будет загружен?

hey i am outside the function declaration

or

hey i am above return

or

hey i am useeffect 1

or

hey i am ui

Хорошо, каким бы ни был ваш ответ, я просто задаю вопрос, как интервьюер, чтобы просто знать, насколько хорошо вы понимаете концепцию.

если ваш ответ «эй, я вне объявления функции», как он получил визуализацию, когда мы просто экспортируем функцию, которую мы объявили, и это написано над функцией.

если ваш ответ «привет, я выше возврата», можете ли вы объяснить, что после этого «привет, я пользуюсь эффектом 1» или «привет, я пользовательский интерфейс»

и если ваш ответ «привет, я пользовательский интерфейс», можете ли вы объяснить, почему не «привет, я пользуюсь эффектом 1»?

Итак, если вы можете ответить на все и думаете, что вы правы, просто подумайте еще раз, что будет выводиться в консоли при первом рендеринге.

вот ответ

hey i am outside the function declaration 
hey i am above return 
hey i am ui  
hey i am useeffect 1

Первая строка будет выводиться в консоль всякий раз, когда модуль, содержащий этот код, импортируется или выполняется. Итак, всякий раз, когда файл, содержащий этот код, включается как часть нашего приложения, будет напечатан оператор консоли.
Но если мы обновим состояние, этот оператор не будет регистрироваться каждый раз, потому что мы не импортируем экземпляр компонента в наше приложение снова и снова, а просто обновляем состояние. (не удаляя экземпляр из дерева волокон и добавляя его снова).

Второе утверждение связано с тем, что компонент похож на обычную функцию, которая возвращает какой-то jsx, поэтому он будет консолью «эй, я выше возврата», но имейте в виду, что всякий раз, когда этот компонент перерисовывается, он будет выполнять эту строку снова и снова.

Теперь мы можем думать, что use effect должен выполняться, но useEffect — это хуки, спроектированные таким образом, что когда компонент смонтирован, он будет выполнять callback-функцию только один раз, если массив зависимостей пуст.
и когда компонент будет удален из дерева, будет выполнен оператор return, который можно использовать для очистки всего, что все еще выполняется для этого компонента, потому что теперь они нам больше не нужны. Но здесь, в нашем случае, мы не удаляем компонент из дерева, а просто мутируем состояние.

поэтому третья строка будет «hey i am ui», а не выражением внутри useEffect.

после этого, когда компонент смонтирован, пришло время для useEffect выполнить обратный вызов
, поэтому следующая строка будет «эй, я использую эффект 1»

теперь, если мы нажмем кнопку, она просто обновит состояние, поэтому консоль будет выглядеть так

hey i am above return
hey i am ui

Надеюсь, я смогу объяснить эту тему. Пожалуйста, отреагируйте на этот пост (хлопните в ладоши), вы также можете подписаться на меня, что будет мотивировать писать больше блогов.

если я ошибаюсь в каком-либо месте, я буду рад изменить его.