Здесь узнаешь, как проходить собеседования Front-End разрабу на СНГ рынке
- Я Senior Front-End, делюсь с тобой личным опытом в IT
- Рассказываю про лайфхаки в прохождении собесов
- Показываю примеры задач с моих job-интервью
My Contact: t.me/max_webdev
Post #41
677
✌️Структура Fiber
Ссылка на 1-ю часть про React Fiber.
Единицу Fiber можно рассматривать как элемент стека, но можно и как экземпляр компоненты. И у данной компоненты (объекта) есть несколько ключевых полей.
1. type - тип компоненты. Для обычных компонент как HTML-элементов это строка ('div', 'span' и др). Для кастомных компонент (<MyComponent /> например) type - это функция или класс.
2. key - ключ компоненты, нужен, чтобы определить, необходимо ли переиспользовать компоненту. Часто key используется при рендере списков.
3. child - это то, что возвращает компонента для рендера. В примере ниже в параметре child будет храниться MyChild.
4. return - это Fiber элемент, к которому должна вернуться программа после обработки текущего Fiber элемента.
Из примера кода выше значением return для My
5. pendingProps и memoizedProps - pendingProps это пропсы в начале выполнения, memoizedProps - пропсы в конце выполнения. Если данные пропсы равны, то это знак для алгоритма React, что предыдущее возвращаемое значение можно переиспользовать. А это значит, что нет необходимости в ререндере.
6. pendingWorkPriority - это число, которое обозначает приоритет единицы работы (задачи для выполнения). Чем больше число, тем ниже приоритет (всего 6 приоритетов).
Алгоритм React использует pendingWorkPriority для поиска следующей единицы работы, которую необходимо выполнить.
P.S. Это конечно же не весь список, но для базового понимания хватит.
Ссылка на 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 для My
Child будет Parent.5. pendingProps и memoizedProps - pendingProps это пропсы в начале выполнения, memoizedProps - пропсы в конце выполнения. Если данные пропсы равны, то это знак для алгоритма React, что предыдущее возвращаемое значение можно переиспользовать. А это значит, что нет необходимости в ререндере.
6. pendingWorkPriority - это число, которое обозначает приоритет единицы работы (задачи для выполнения). Чем больше число, тем ниже приоритет (всего 6 приоритетов).
Алгоритм React использует pendingWorkPriority для поиска следующей единицы работы, которую необходимо выполнить.
P.S. Это конечно же не весь список, но для базового понимания хватит.
- 👍 9
