Прежде чем мы углубимся в тему, давайте сначала познакомимся с синхронным и асинхронным.
Термин «асинхронный» относится к операциям и функциям, которые не блокируют выполнение программы в ожидании завершения определенной задачи, тогда как «синхронные» операции обычно блокируются, что означает, что выполнение программы приостанавливается до завершения операции.
Итак, давайте посмотрим пример:
Что будет вывод здесь:
Итак, мы обнаружили, что на выходе она напечатала 0 и 2, что оправдывает то, что когда мы обновляем состояние, оно не изменяется, а программа выполняется полностью, а затем, когда значение изменяется, она отображает состояние и печатает 2, что является свойством асинхронных функций.
Но означает ли это, что функция setState асинхронна, ответ будет НЕТ. Для этого нам нужно изучить, как React перерисовывает обновленное состояние. Когда компонент в React имеет обновленное состояние, React находит все элементы, помеченные для обновления. Для каждого помеченного элемента он преобразует JSX в элемент React с помощью компилятора Babel, а затем выполняется для создания Virtual Dom. Этот vdom не визуализируется напрямую, а преобразуется в волокно, а затем визуализируется. Процесс преобразования из vdom в волокно называется reconcile, при котором в процессе создаются соответствующие элементы dom, а затем сразу после выполнения всех преобразований фиксируется в dom. Этот процесс не является одноразовым, а выполняется планировщиком, поэтому его можно выполнять пакетами. Конкретное время, необходимое React для обновления пакета, зависит от различных факторов, включая сложность дерева компонентов, количество обновлений состояния и производительность базового механизма JavaScript в браузере или среде выполнения.
React пакетно обновляет состояние и выполняет их позже для оптимизации производительности. Это позволяет React оптимизировать процесс рендеринга.
Однако даже если setState
является асинхронным, это не означает, что он ведет себя асинхронно с точки зрения выполнения программы JavaScript. Сама функция setState
по-прежнему синхронна, а это означает, что следующая строка кода после вызова setState
не будет выполняться, пока не завершится обновление состояния.
console.log('Before setState'); this.setState({ count: 1 }); console.log('After setState');
В этом примере оператор console.log
после setState
не будет выполняться, пока не завершится обновление состояния. Однако само обновление состояния может обрабатываться React асинхронно.
Итак, мы пришли к выводу, что setState обновляет состояние асинхронно, но с точки зрения выполнения программы Javascript оно является синхронным.