Добро пожаловать обратно, возможно, к самой сложной и запутанной статье из всей серии. Но я говорю это не для того, чтобы вас напугать, потому что это, возможно, самая интересная и увлекательная статья из этой серии.
Если вы не сразу поймете на 100% то, чему я собираюсь вас здесь научить, это совершенно нормально. Так что вообще не переживайте по этому поводу.
Опять же, вы можете использовать React, не зная ничего из этого, но если у вас любопытный ум и вы чувствуете необходимость понять, как React делает то, что он делает, тогда эта статья для вас.
Теперь, прежде чем мы начнем, давайте сначала вернемся к тому, где мы впервые узнали о механике состояния. Что ж, тогда я сказал вам, что мы можем концептуально представить это (изображение, приведенное ниже) как новое представление, отображаемое на экране и в Dom.
Однако теперь мы знаем, что технически это неправда, поскольку рендеринг — это не экран, Дом или Представление. Речь идет всего лишь о вызове функций компонента.
Мы также знали, что всякий раз, когда происходит повторный рендеринг, React отбрасывает старое представление компонента и заменяет его совершенно новым. Однако технически это не так. Таким образом, Dom фактически не будет обновляться для всего экземпляра компонента.
Фаза рендеринга
Итак, если это неправда, давайте теперь узнаем, что происходит вместо этого и как на самом деле работает рендеринг. Итак, в предыдущей статье мы говорили о том, как запускается рендеринг.
В этой статье мы узнаем все о том, как на самом деле выполняется рендеринг на этапе рендеринга.
Таким образом, в начале фазы рендеринга React пройдет через все дерево компонентов, возьмет все экземпляры компонентов, которые вызвали повторный рендеринг, и фактически отрисует их, что просто означает вызов соответствующих функций компонента, которые мы написали в нашем коде.
