ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Простая шина событий для общения между компонентами во Vue 2
год назад·2 мин. на чтение
Иногда нужно реализовать быстрое и простое решение для передачи данных между компонентами Vue.js.
Конечно, есть Vuex для централизованного управления состоянием. Таким образом, он может обеспечить приложению единый источник истины.
Но для приложения с простой архитектурой достаточно общаться между компонентами с помощью событий. Для этого мы можем создать быстрое решение и реализовать шину событий (event bus). Шину событий позволяет нам отправлять в одном компоненте и слушать это событие в другом.
В данном примере будет показано, как это сделать в приложении Vue.js. Благодаря простоте фреймворка Vue он позволяет нам создать механизм обмена событиями с помощью нескольких строк кода.
Здесь у нас есть компонент ComponentA, который импортирует
Здесь мы создали JavaScript ES6 модуль, который импортирует Vue, создали и экспортировали новый экземпляр Vue. Вот и все. Мы реализовали EventBus и теперь можем начать его использовать.// eventBus.js import Vue from "vue"; export const eventBus = new Vue();
eventBus
. Когда вызывается метод emitMethod()
компонента, он испускает новое событие с именем EVENT_NAME
и передает вместе с ним данные события (payload).
В другом компоненте мы можем зарегистрировать слушателя, который слушает событие// ComponentA.js <script> import { eventBus } from "./eventBus"; export default { name: "ComponentA", methods: { emitMethod() { eventBus.$emit("EVENT_NAME", { data: "someData" }); }, }, }; </script> <template> <p>ComponentA</p> </template>
EVENT_NAME
, передаваемое по шине eventBus
. Как только событие появится, мы можем выполнить JavaScript с полученным в качестве аргумента payload.
Вот и все. Вот так просто мы создали решение для передачи событий между различными частями нашего приложения.// ComponentB.js <script> import { eventBus } from "./eventBus"; export default { name: "ComponentB", mounted() { eventBus.$on("EVENT_NAME", this.handleEvent); }, beforeUnmount() { eventBus.$off("EVENT_NAME", this.handleEvent); }, methods: { handleEvent(payload) { console.log(payload); // => { data: "someData" } }, }, }; </script> <template> <p>ComponentB</p> </template>
В этом примере мы создали и реализовали механизм передачи данных между слабосвязанными компонентами. Не тратя много времени и усилий на изучение принципов Vuex, Redux или других фреймворков с неизменяемым состоянием. Это удобный способ коммуникации для более простой архитектуры. Которая впоследствии может быть усовершенствована путем внедрения какого-либо централизованного фреймворка управления состояниями по мере роста приложения.// App.js <script> import ComponentA from "./ComponentA"; import ComponentB from "./ComponentB"; export default { name: "App", components: { ComponentA, ComponentB, }, }; </script> <template> <div> <ComponentB /> <ComponentA /> </div> </template>
Рендеринг и фиксация в React
10 месяцев назад·1 мин. на чтение
Прежде чем ваши компоненты отобразятся на экране, они должны быть обработаны React. Понимание шагов этого процесса поможет вам понять, как выполняется ваш код, и объяснить его поведение.
Содержание туториала по React
Прежде чем ваши компоненты отобразятся на экране, они должны быть обработаны React. Понимание шагов этого процесса поможет вам понять, как выполняется ваш код, и объяснить его поведение.
Представьте, что ваши компоненты — повара на кухне, собирающие вкусные блюда из ингредиентов. В этом сценарии React — это официант, который принимает запросы от клиентов и приносит им их заказы. Этот процесс запроса и обслуживания пользовательского интерфейса состоит из трех этапов:
- Запуск рендера (доставка заказа гостя на кухню)
- Рендер компонента (подготовка заказа на кухне)
- Фиксация (commit) в DOM (размещение заказа на столе)
Шаг 1. Запуск рендеринга
Есть две причины для рендеринга компонента:- Это начальный рендер компонента.
- Состояние компонента (или одного из его предков) было обновлено.
Начальный рендер
Когда ваше приложение запускается, вам нужно запустить первоначальный рендеринг. Фреймворки и песочницы иногда скрывают этот код, но это делается путем вызоваcreateRoot
с целевым узлом DOM, а затем вызова его метода рендеринга с вашим компонентом:
// index.js import Image from './Image.js'; import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('root')); root.render(<Image />);
// Image.js export default function Image() { return <img src="https://example.com/image.jpg" alt="image" />; }
Рендеринг при обновлении состояния
После первоначального рендеринга компонента вы можете запускать дальнейшие рендеры, обновляя его состояние с помощью функцииset
. Обновление состояния вашего компонента автоматически ставит рендеринг в очередь. (Вы можете представить это как гостя ресторана, который заказывает чай, десерт и другие блюда, после того как сделал свой первый заказ, в зависимости от состояния жажды или голода.)
Шаг 2: React визуализирует ваши компоненты
После запуска рендеринга React вызывает ваши компоненты, чтобы выяснить, что отображать на экране. «Рендеринг» — это React, вызывающий ваши компоненты.- При первоначальном рендеринге React вызовет корневой компонент.
- Для последующих рендеров React будет вызывать функциональный компонент, обновление состояния которого инициировало рендеринг.
Gallery()
и Image()
несколько раз:
// Gallery.js export default function Gallery() { return ( <section> <h1>Inspiring Sculptures</h1> <Image /> <Image /> <Image /> </section> ); } function Image() { return <img src="https://example.com/image.jpg" alt="image" />; }
// index.js import Gallery from './Gallery.js'; import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('root')); root.render(<Gallery />);
- Во время первоначального рендеринга React создаст узлы DOM для тегов
<section>
,<h1>
и трех тегов<img>
. - Во время повторного рендеринга React вычислит, какие из их пропсов, если таковые имеются, изменились с момента предыдущего рендеринга. Он ничего не будет делать с этой информацией до следующего шага, фазы фиксации.
- При тех же входах, тот же выход. При одинаковых входных данных компонент всегда должен возвращать один и тот же JSX. (Когда кто-то заказывает салат с помидорами, он не должен получать салат с луком.)
- Он думает только о своих делах. Он не должен изменять какие-либо объекты или переменные, существовавшие до рендеринга. (Один заказ не должен изменять чей-либо другой заказ.)
Оптимизация производительности
Поведение рендеринга по умолчанию всех компонентов, вложенных в обновленный компонент, не является оптимальным для производительности, если обновленный компонент находится очень высоко в дереве. Если вы столкнулись с проблемой производительности, существует несколько способов ее решения, описанных в разделе «Производительность». Не оптимизируйте преждевременно.Шаг 3: React фиксирует изменения в DOM
После рендеринга (вызова) ваших компонентов React изменит DOM.- Для начального рендеринга React будет использовать DOM API
appendChild()
для размещения на экране всех созданных DOM-узлов. - Для повторного рендеринга React применит минимально необходимые операции (рассчитанные во время рендеринга), чтобы привести DOM в соответствие с последним результатом рендеринга.
<input>
, обновив его значение, но текст не исчезнет при повторном рендеринге компонента:
Это работает, потому что на этом последнем шаге React только обновляет содержимое// Clock.js export default function Clock({ time }) { return ( <> <h1>{time}</h1> <input /> </> ); }
<h1>
новым значением времени. Он видит, что <input>
появляется в JSX в том же месте, что и в прошлый раз, поэтому React не касается <input>
или его значения.
Отрисовка браузером
После того, как рендеринг завершен и React обновил DOM, браузер перерисует экран. Хотя этот процесс известен как "рендеринг в браузере", мы будем называть его "отрисовкой", чтобы избежать путаницы в остальной части этого руководства.Резюме
Любое обновление экрана в приложении React происходит в три этапа:- Запуск
- Рендеринг
- Фиксация