Принципы отзывчивости в React
1. Разработчикам нужно обращать внимание только на передачу состояния (данных).При изменении состояния фреймворк React автоматически перестроит пользовательский интерфейс в соответствии с новым состоянием.
2. После получения уведомления об изменении состояния пользователя платформа React вычислит измененную часть дерева с помощью алгоритма Diff на основе текущего дерева рендеринга и последнего изменения состояния, а затем обновит только измененную часть (операция DOM), тем самым избегать рефакторинга всего дерева для повышения производительности. После изменения состояния фреймворк React не будет сразу рассчитывать и отображать измененную часть дерева DOM. Вместо этого React построит уровень абстракции на основе DOM, то есть виртуальное дерево DOM. Любые изменения в данных и состоянии будет автоматически и эффективно синхронизироваться с виртуальным DOM и, наконец, синхронизироваться с реальным DOM в пакетном режиме, вместо того, чтобы манипулировать DOM каждый раз, когда он изменяется.
Почему мы не можем напрямую манипулировать деревом DOM каждый раз, когда оно меняется? Это связано с тем, что каждая операция DOM в браузере может привести к перерисовке или перекомпоновке браузера:
* Если DOM изменится только по внешнему виду и стилю, например, изменится цвет, это приведет к тому, что браузер перерисует интерфейс.
* Если структура дерева DOM изменится, например, размер, макет, скрытые узлы и т. д., браузеру необходимо перекомпоновать (и изменить макет).
Перерисовка и перекомпоновка браузера — относительно дорогостоящие операции. Если каждое изменение напрямую воздействует на DOM, это вызовет проблемы с производительностью, а пакетная операция приведет только к обновлению DOM.
2. Если вы не понимаете вышеизложенное, то, говоря простым языком: отзывчивость React реализуется с использованием алгоритма diff. Когда React меняет состояние или реквизиты, он вызывает метод render() для создания виртуального дерева DOM.React сравнит это дерево с последним сгенерированным деревом, выявит разницу и обновит разницу.