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

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

В этой статье я надеюсь объяснить, что считаю одними из важнейших фундаментальных концепций 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  }}

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

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

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

Если компонент является компонентом на основе класса, то 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"/>

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

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

<MyComponent name="Quincy"/>

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

Хорошо.

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

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

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

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

Легко, а?

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

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

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

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

Да.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это важно.

Вывод

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

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

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

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