Принципы Реакт - продолжение:
- Контролируемые компоненты: это компоненты, полностью зависимые от родительских. У них нет своего state и, как правило, своих методов, кроме render. Их состояние хранится в родительских компонентах, а методы передаются через props.
- В парадигме MVC Реакту отводится место View. Реакт - просто библиотека рендеринга. Разного рода рассчеты, валидация, обработка информации, кроме относящейся к интерфейсу, - все это принадлежит к бизнес-логике и не должно быть определено в компонентах.
- Атрибуты ref могут привести к выстроению императивной системы. Для React это антипаттерн. Об этом позже.
- Функциональные компоненты - способ проектирования Реакт-компонентов, у которых есть только метод render, а остальная информация передается через props. Это более быстрый и чистый способ написания контролируемых компонентов.
#react #функциональные_компоненты
- Контролируемые компоненты: это компоненты, полностью зависимые от родительских. У них нет своего state и, как правило, своих методов, кроме render. Их состояние хранится в родительских компонентах, а методы передаются через props.
- В парадигме MVC Реакту отводится место View. Реакт - просто библиотека рендеринга. Разного рода рассчеты, валидация, обработка информации, кроме относящейся к интерфейсу, - все это принадлежит к бизнес-логике и не должно быть определено в компонентах.
- Атрибуты ref могут привести к выстроению императивной системы. Для React это антипаттерн. Об этом позже.
- Функциональные компоненты - способ проектирования Реакт-компонентов, у которых есть только метод render, а остальная информация передается через props. Это более быстрый и чистый способ написания контролируемых компонентов.
#react #функциональные_компоненты
JS - копирование объекта:
- Для копирования объектов есть функция assign. Как она работает:
- функция принадлежит объекту Oblect, поэтому вызывается через Object.assign().
- Она принимает параметры: target - единственный, source - множество, где:
1. target - объект, который возвратит функция.
2. source - объект, из которого копируются ключи-значения.
Пример с клонированием объекта:
let obj = { key: value }
let clone = Object.assign({}, obj)
Здесь функция копирует в пустой объект содержимое obj и присваивает пустой объект переменной clone. Source может быть и объект, определенный прямо в функции.
ВАЖНО: порядок указания sources задает приоритет перезаписи свойств при клонировании. Например в коде:
Object.assign({}, src1, src2)
src1 будет иметь больший приоритет, и если в src2 встретится свойство, аналогичное содержащемуся в src1, оно будет перезаписано свойством из src1.
Эта тема важна для понимания иммутабельности в React.
#JS #React
- Для копирования объектов есть функция assign. Как она работает:
- функция принадлежит объекту Oblect, поэтому вызывается через Object.assign().
- Она принимает параметры: target - единственный, source - множество, где:
1. target - объект, который возвратит функция.
2. source - объект, из которого копируются ключи-значения.
Пример с клонированием объекта:
let obj = { key: value }
let clone = Object.assign({}, obj)
Здесь функция копирует в пустой объект содержимое obj и присваивает пустой объект переменной clone. Source может быть и объект, определенный прямо в функции.
ВАЖНО: порядок указания sources задает приоритет перезаписи свойств при клонировании. Например в коде:
Object.assign({}, src1, src2)
src1 будет иметь больший приоритет, и если в src2 встретится свойство, аналогичное содержащемуся в src1, оно будет перезаписано свойством из src1.
Эта тема важна для понимания иммутабельности в React.
#JS #React
Выгоды иммутабельности в Реакт:
- Проще отслеживать изменения. Если, например, для хранения state используется один мутабельный объект, для отслеживания изменений его нужно перебирать заново. Если же используется иммутабельность, то отслеживается только название объекта: если оно отличается - состояние изменено.
- Проще выполнить сложные задачи, такие как откат к состоянию, отделенному промежуточными операциями.
- Легко выполнять ре-рендеринг компонентов.
- Способствует созданию "чистых" компонентов.
#React #Иммутабельность
- Проще отслеживать изменения. Если, например, для хранения state используется один мутабельный объект, для отслеживания изменений его нужно перебирать заново. Если же используется иммутабельность, то отслеживается только название объекта: если оно отличается - состояние изменено.
- Проще выполнить сложные задачи, такие как откат к состоянию, отделенному промежуточными операциями.
- Легко выполнять ре-рендеринг компонентов.
- Способствует созданию "чистых" компонентов.
#React #Иммутабельность
Реакт - заметка об элементах:
Элементы React - это, по сути, объекты. Благодаря этому мы можем передавать их, как аргументы, в функции и управлять ими привычным для объектов способами. Важный вывод:
- props, key и другие важные сущности React - это просто ключи объектов, которыми под капотом являются элементы.
#React
Элементы React - это, по сути, объекты. Благодаря этому мы можем передавать их, как аргументы, в функции и управлять ими привычным для объектов способами. Важный вывод:
- props, key и другие важные сущности React - это просто ключи объектов, которыми под капотом являются элементы.
#React
React - заметки:
- Компоненты Реакт - это функции или классы, которые возвращают Реакт-элементы. Ничего больше.
- Компоненты Реакт "вызываются" в JSX, как обычные HTML-теги - не важно, функциональные это компоненты, классы или какие-либо другие.
- Кастомные компоненты обязательно нужно называть с большой буквы: это не просто конвенция, но правило внутренней архитектуры Реакт.
- Реакт-элементы можно добавлять в компоненты через фигурные скобки.
- Переменные нельзя присвоить компонентам Реакт строкой, как атрибуты HTML. Они (переменные) передаются в атрибуты через фигурные скобки:
attr={styleObject}
- CSS можно передавать компонентам с помощью объектов-сборников правил.
- Любой код, использующий JSX, требует импорта React. Это обязательно.
- Любое свойство, которому не назначено значение, в JSX эквивалентно true.
- Без передачи props объект props все равно будет передан компоненту, но будет пустым.
- Простая схема передачи props:
1. Создаем компонент, отвечающий за однотипный вывод разных данных.
2. Из компонента, включающего в себя версии этого, более мелкого, возвращаем разные его версии.
3. Присваиваем версиям атрибут с разными строками.
4. В самом этом компоненте указываем, что отрисовывать он должен содержимое props своих версий:
function MyElement({ myAttr }) {
return <span>{myAttr}</span>
}
Обратите внимание, здесь не используется прямой путь до props (props.myAttr): вместо этого применяется деструктуризация props-объекта.
#React
- Компоненты Реакт - это функции или классы, которые возвращают Реакт-элементы. Ничего больше.
- Компоненты Реакт "вызываются" в JSX, как обычные HTML-теги - не важно, функциональные это компоненты, классы или какие-либо другие.
- Кастомные компоненты обязательно нужно называть с большой буквы: это не просто конвенция, но правило внутренней архитектуры Реакт.
- Реакт-элементы можно добавлять в компоненты через фигурные скобки.
- Переменные нельзя присвоить компонентам Реакт строкой, как атрибуты HTML. Они (переменные) передаются в атрибуты через фигурные скобки:
attr={styleObject}
- CSS можно передавать компонентам с помощью объектов-сборников правил.
- Любой код, использующий JSX, требует импорта React. Это обязательно.
- Любое свойство, которому не назначено значение, в JSX эквивалентно true.
- Без передачи props объект props все равно будет передан компоненту, но будет пустым.
- Простая схема передачи props:
1. Создаем компонент, отвечающий за однотипный вывод разных данных.
2. Из компонента, включающего в себя версии этого, более мелкого, возвращаем разные его версии.
3. Присваиваем версиям атрибут с разными строками.
4. В самом этом компоненте указываем, что отрисовывать он должен содержимое props своих версий:
function MyElement({ myAttr }) {
return <span>{myAttr}</span>
}
Обратите внимание, здесь не используется прямой путь до props (props.myAttr): вместо этого применяется деструктуризация props-объекта.
#React