Три основных функции Salesforce LWC Spring 23 для разработчиков

Некоторые экземпляры Salesforce начнут получать Spring 23 с 13 января по 11 февраля. Если вы хотите узнать, какой день запланирован для вашего экземпляра, перейдите по этой ссылке, выберите имя своего экземпляра и перейдите на вкладку «Обслуживание».
Сегодня я расскажу о 3 важных функциях веб-компонентов Lightning, которые облегчат нашу работу в качестве Salesforce Professional.

1. Запрашивайте элементы DOM с помощью ссылок

Я добавил эту функцию первой в списке, так как она аналогична той, что есть у нас в React. Благодаря этому теперь мы можем получить доступ к элементам в теневой и светлой DOM без необходимости использовать this.template.querySelector() или this.template.querySelectorAll().
До:

<template>
   <div>Task 1</div>
   <div>Task 2</div>
</template>

В JavaScript мы используем объект this.template для запроса элементов DOM. Этот метод требует немного больше кода, если, например, у нас есть несколько элементов div в разметке.

renderedCallback() {
   let task1 = this.template.querySelector('div'); //single element
   let tasks = this.template.querySelectorAll('div'); //array 
}

После:
мы добавляем удача: ссылка атрибут для конкретных элементов, к которым мы хотим получить доступ через JavaScript.

<template>
   <div lwc:ref="myDiv1">Task 1</div>
   <div lwc:ref="myDiv2">Task 2</div>
</template>

Мы сразу видим преимущества использования рефов, которые позволяют нам более четко нацеливаться на определенные элементы в DOM.

renderedCallback() {
   let task1 = this.refs.myDiv1;
   let task2 = this.refs.myDiv2;
}

2. Синхронизируйте данные компонентов без обновления страницы с помощью RefreshView API (бета-версия)

Наконец, эта функция появится в LWC и AURA с новым модулем Lightning/Refresh и RefreshView API. Эта функция позволит нам контролировать область обновления, обновлять данные для определенной иерархии компонентов (представлений) без перезагрузки всего компонента. Сегодня AURA поддерживает только устаревшие сила: обновить вид который обновляет весь компонент, что не соответствует требованиям современной веб-разработки.

3. Просмотр отладочной информации для ваших проводных свойств

Попрощайтесь с console.log. Раньше при отладке данных, полученных с помощью связанного свойства, нам приходилось использовать связанную функцию, чтобы консольный журнал мог проверять деконструированные данные и свойства ошибок. В этом выпуске мы теперь можем визуализировать возвращенные проводные данные непосредственно в Chrome DevTools, включив пользовательские средства форматирования и проверив отображаемый пользовательский элемент. на панели Элементы.
Захват удачи-1.PNG
Для этого изображения не указан замещающий текст
Выбрав элемент, нажмите на панель консоли и введите $0, это сразу же вернет отладочную информацию в консоль.
Захват удачи-2.PNG
Для этого изображения не указан замещающий текст
Это был краткий обзор того, что я считаю тремя главными функциями LWC для весны 23. Полные примечания к выпуску можно найти по этой ссылке.