TGViewer
Maxim WebDev Maxim WebDev @maxim_webdev · 513 subscribers
Post #41 677
✌️Структура Fiber

Ссылка на 1-ю часть про React Fiber.

Единицу Fiber можно рассматривать как элемент стека, но можно и как экземпляр компоненты. И у данной компоненты (объекта) есть несколько ключевых полей.

1. type - тип компоненты. Для обычных компонент как HTML-элементов это строка ('div', 'span' и др). Для кастомных компонент (<MyComponent /> например) type - это функция или класс.

2. key - ключ компоненты, нужен, чтобы определить, необходимо ли переиспользовать компоненту. Часто key используется при рендере списков.

3. child - это то, что возвращает компонента для рендера. В примере ниже в параметре child будет храниться MyChild.

function Parent() {
return <
MyChild />
}


4. return - это Fiber элемент, к которому должна вернуться программа после обработки текущего Fiber элемента.

Из примера кода выше значением return для MyChild будет Parent.

5. pendingProps и memoizedProps - pendingProps это пропсы в начале выполнения, memoizedProps - пропсы в конце выполнения. Если данные пропсы равны, то это знак для алгоритма React, что предыдущее возвращаемое значение можно переиспользовать. А это значит, что нет необходимости в ререндере.

6. pendingWorkPriority - это число, которое обозначает приоритет единицы работы (задачи для выполнения). Чем больше число, тем ниже приоритет (всего 6 приоритетов).

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

P.S. Это конечно же не весь список, но для базового понимания хватит.
  • 👍 9
More from @maxim_webdev
  1. Jun 9, 2025Как найти все ред-флаги компании в процессе собеседования? 🚩🚩🚩 Многие разработчики в ко…
  2. Mar 10, 2025Какие алгоритмические задачи с собеседований я применял на коммерческих проектах? Вас тоже…
  3. Nov 29, 2024Смешная история про общение с рекрутером Мне написала рекрутер и предложила пройти собесед…
  4. Nov 19, 2024⚛️ Хочу вам рассказать про рендеринг в React через реальную ситуацию с работы. Я отдал зад…
  5. Nov 4, 2024Недавно мне предложили 10_000 RUB за то, чтобы я другому человеку на алгоритмической секци…
  6. Oct 21, 2024Помните я вам рассказывал, как рекрутер не успевала записывать мои ответы на технические в…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →