Эти основы React, которые вы пропускаете, могут убить вас.

1656524533 eti osnovy react kotorye vy propuskaete mogut ubit vas

Часто неспособность наладить определенную ошибку возникает из-за непонимания какой-либо основной концепции.

Вы можете сказать то же, если вы не понимаете некоторые более продвинутые концепции, потому что вам не хватает знаний об определенных основах.

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

Эти понятия не особенно технические. Есть много других статей, освещающих это, например props, state, context, setState и так дальше.

Однако в этой статье я сконцентрируюсь на некоторых концептуальных знаниях, которые являются основой большинства технических вещей, которые вы будете делать в React.

Готовы?

Как React работает под капотом

Одна из первых вещей, которые каждый узнает в React, — это создавать компоненты. Я уверен, что вы тоже этому научились.

Например:

// functional component function MyComponent() {  return <div> My Functional Component </div> }// class based component class MyComponent extends React.Component {  render() {     return <div> My Class Component </div>   }}

Большинство компонентов, которые вы пишете, будут возвращать некоторые элементы:

function MyComponent() {  return <span> My Functional Component &lt;/span> //span element}class MyComponent extends React.Component {  render() {     return <div> My Class Component &lt;/div> //div element  }}

Под капотом большинство компонентов возвращает дерево элементам.

tQn1uuZsujd4JU-cIxVrjn8-3Giy1CRAqjCD
Компоненты при внутренней оценке часто возвращают дерево элементов.

Теперь вы также должны помнить, что компоненты похожи на функции, возвращающие значение на основе их props и state ценности.

7NCegDIGXAS8OGYEP733SK7L-uOpMI4vZwSR
Компоненты подобны функциям с параметрами «props» и «state».

Итак, каждый раз, когда props или state изменяются значения компонента, воспроизводится новое дерево элементов.

jqur2fLzWkWzsXgcm0bDIVRRJWSfnN0v6DSN
Если значения props или состояния изменяются, дерево элементов повторно воспроизводится. Это приводит к появлению нового дерева.

Если компонент является компонентом на основе класса, то render функция вызывается для возврата дерева элементов.

class MyComponent extends React.Component {    render() {    //this function is invoked to return the tree of elements  }}

Если компонент является функциональным компонентом, то его возвращенное значение дает дерево элементов.

function MyComponent() {     // the return value yields the tree of elements   return <div>
   </div>}

Почему это важно?

Рассмотрим компонент, <MyComponent /> который берет in реквизит, как показано ниже:

<MyComponent name="Ohans"/>

При воспроизведении этого компонента возвращается дерево элементов.

3DsSWux3GMF8nLy8KyWXqaciojsvhKaIcts8
Дерево элементов, возвращенных при визуализации

Что происходит, когда значение name изменения?

<MyComponent name="Quincy"/>

Ну, новое дерево элементов возвращено!

OQ1FFA7FNaRpmkrMH43CpbHJCV2opTEBNMqe
Новое дерево элементов возвращено во время визуализации с разными реквизитами

Хорошо.

Теперь React располагает двумя разными деревьями — прежним и текущим деревом элементов.

На этом этапе React сравнивает оба дерева, чтобы найти, что именно изменилось.

cO44K8IzUSeTPwvnGm5nJwYhfn0AvC5lnyGX
Два разных дерева. Что действительно изменилось в обоих деревьях?

В большинстве случаев все дерево не изменилось. Просто некоторые обновления здесь и там.

После сравнения этих двух деревьев элементов фактическая DOM затем обновляется с изменениями в новом дереве элементов.

Легко, а?

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

Реагируйте только на необходимые обновления. Правда?

Когда вы начинаете работать с React, всем рассказывают, насколько React великолепен – в частности, как он просто обновляет существенную часть обновляемой DOM.

o83thhmBUVqoiatZw56dEY6yGNMJn5jxemhw
Из React Docs: инспектор DOM, показывающий подробные обновления.

Это вполне правда?

Да.

Однако, прежде чем React приступит к обновлению DOM, помните, что под капотом он сначала построил дерево элементов для различных компонентов и сделал существенное «различие» перед обновлением DOM. Другими словами, он сравнил изменения между предыдущим и текущим деревьями элементов.

Причина, почему я еще раз повторяю, в том, что если вы новичок в React, вы можете быть слепыми к проблемам производительности, вырытым в вашем приложении, потому что вы думаете, что React просто обновляет DOM необходимым.

Хотя это правда, проблемы с производительностью в большинстве программ React начинаются с процесса до обновления DOM!

Бесполезные визуализации против визуальных обновлений

Независимо от того, сколь малым, визуализация дерева элементов компонента занимает некоторое время (независимо от того, сколько минут). Время визуализации увеличивается при увеличении дерева элементов компонента.

Следствием этого является то, что в вашей программе вы не хотите, чтобы React повторно отображал дерево элементов компонентов, если это не важно.

Позвольте показать вам краткий пример.

Рассмотрим программу со структурой компонентов, как показано ниже:

sN9IozHOb0YjHvIPzCleBcjPZsTR8nPNZn3y
Программа с родительским компонентом A и дочерними компонентами B, C и D.

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

5xX0JPX-o-Gej4yKA3iJ8mv4EQpLEaWkvQgH
Родительский компонент A получает некоторые реквизиты и передает их дочернему компоненту D.

Теперь, когда значение prop в A изменяет все дочерние элементы A повторно отображаются для вычисления нового дерева элементов.

74D67kRq4cnFHlKfw86OUkdCO1nMYgT9E-rN
iAEokbsFD2IW1AOG7DSnhfRFTp0VztjXf5YA
Когда родительский компонент получает новые Props, каждый дочерний элемент воспроизводится и возвращается новое дерево.

По-видимому, компоненты B и C также повторно отображаются, даже если они совсем не изменились! Они не получили ни одного нового реквизита!

Такая ненужная повторная визуализация называется «израсходованной» визуализации.

В этом примере B и C не нужно повторно отображать, но React этого не знает.

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

Продолжая, рассмотрите заявку ниже:

eSvpbb0SILVtzIf8G7peS9DfJOK2gS1bIc1s
Карди в действии 🙂

Я называю это приложение Cardey.

Когда я нажимаю кнопку, чтобы изменить пользовательскую профессию, я могу выделить обновление DOM, как показано ниже:

QnX-5eQrP7GkCVyxl5Xkfu78uhxN-9JhJMMJ
Включите визуальные обновления (Paint Flashing) с помощью Chrome Devtools

И теперь я вижу, что обновлено в DOM.

Это представление о визуальных обновлениях DOM. Обратите внимание на зеленую вспышку вокруг текста «Я библиотекарь».

Это замечательно, но я озабочен начальным рендерингом дерева компонентов в React.

Итак, я тоже мог выбрать чек.

xDeyGJE6fL42FrSmU15nm5she0xfO6mtC42G
Включите переключатель обновления выделения в React Devtools

Сделав это, я вижу, какие компоненты действительно воспроизводятся, когда я нажимаю эту кнопку.

zduYcMxUoMrKLzHbLABBf3d2zkVa0gkv9Stc
Обратите внимание на зеленую вспышку вокруг карты пользователя.

Вы видите, чем отличаются визуальные обновления DOM и обновление рендеринга в реакции?

Большая карта пользователя была повторно воспроизведена, но обновлена ​​только небольшая текстовая область.

Это важно.

Вывод

Я считаю, что теперь у вас более интуитивное понимание того, что происходит под капотом ваших компонентов React.

На самом деле происходит гораздо больше, чем я обсуждал здесь. Однако это хорошее начало.

Создайте потрясающие программы!

Вы сейчас изучаете React/Redux? Если да, у меня есть действительно отличная серия книг о Redux. Некоторые говорят, что это одна из самых лучших технических книг, которые они когда-либо читали!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *