Публикации по теме 'components'
Три шага к созданию приложений Angular с компонентами
Учебник по правильному созданию реальных приложений с компонентами Angular 1.5.
В предыдущем посте я представил компоненты Angular 1.5 как новые строительные блоки для приложений Angular. Компоненты имеют значительные преимущества по сравнению с директивами или маршрутами с контроллерами, страдающими от проблем с наследованием области видимости.
Короче говоря, компоненты имеют изолированную область видимости, четко декларируют свои «односторонние» привязки, имеют синтаксис..
7 простых приемов, позволяющих избежать нежелательных повторных рендеров для оптимизации производительности в React
Автор: Сукджит Сингх Сандху || Редактор: Анита Тогулува
Как мы знаем из предыдущих статей, React работает быстро, поскольку он использует технику виртуального DOM и при каждом рендеринге сравнивает виртуальный DOM с фактическим DOM, и только diff обновляется в фактическом DOM, который отлично работает, когда размер приложения равен маленький. Но по мере того, как приложение растет, появляется множество факторов, вызывающих ненужные повторные отрисовки, и оно начинает замедляться...
React: Функциональные компоненты класса VS ⚛
Изучение React было отличной кривой обучения и определенно показало мне потенциал для создания приложений в будущем.
В этом блоге я расскажу о различиях между компонентами Class и Functional и о том, как мы можем использовать их в наших интересах.
Что такое компонент? 🤔
Компонент - это независимый блок кода, который служит функцией JavaScript, но будет return HTML, например:
function Example(props) {
return <p>Hello there, {props.name}</p>
//We use the same..
Компоненты в React
Основная цель компонентов — разделить весь пользовательский интерфейс на множество частей .
В React есть два типа компонентов
1. Функциональный компонент
2. Компонент класса
Функциональный компонент:
Функциональный компонент работает как функция javascript, принимает props ( свойства ) в качестве аргументов и возвращает элементы реакции.
Покажем, как работает функциональная составляющая
Здесь имя функционального компонента — Welcome, в качестве аргумента он..
Angular - Пользовательские элементы формы
Большинство продуктов, над которыми я работал, были / являются B2B, и они состояли из многих (МНОГИХ) веб-форм. Вы знаете, как это происходит.
В компоненте необходимо создать модель формы (особенно если вы используете реактивные формы ). Создайте элементы HTML Создайте элементы HTML … Создайте элементы HTML ➿
Эти элементы HTML более или менее содержат элемент-оболочку ‹div› , тег ‹label› , поле ‹input› , элементы для ошибок. Сообщения. Это продолжается и продолжается...
Оптимизация производительности в компонентах React
Под капотом React создает нечто похожее на виртуальное дерево DOM для отслеживания обновлений при изменении состояния или свойства компонента.
Это также подразумевает, что его функция рендеринга вызывается для создания нового дерева и сравнения его с текущим, чтобы знать, что обновлять.
"Самая быстрая функция - та, которая никогда не вызывалась"
Даже когда ничего не меняется, для определения этого вызывается множество функций, и обычно это большой разрыв в производительности..
Создание библиотеки компонентов React
Часть 2 - Тестирование компонентов
Это вторая часть этой серии. В первой части мы построили скелет нашей библиотеки, настроили среду разработки и добавили первый, базовый компонент. Ни одна библиотека не годится без тестов, давайте добавим их сейчас.
Библиотеки тестирования
Для тестирования наших компонентов мы будем использовать Jest и React Testing Library .
Установим их:
npm install --save-dev @testing-library/react jest
Теперь добавьте сценарий "test": "jest" в..
