Nr.1 Flashcards
(33 cards)
В проекте React мы добавляем ссылку на 2 файла. Один из них - react.js, другой - react-dom.js. Почему нам нужно включить два файла, а не один?
Файл React.js - это небольшой файл, который выполняет работу по созданию компонентов. Поэтому он используется как в веб-проектах, так и в проектах React-Native. В Интернете компоненты затем отображаются в браузере с помощью response-dom.js. Таким образом, 2 файла разделены для возможности повторного использования.
Что такое чистая функция?
Чистая функция не изменяет свой ввод. Он всегда возвращает одно и то же значение для одного и того же ввода. В React компонент должен быть чистой функцией по отношению к своим свойствам. Это означает, что для конкретного пропса визуализированный компонент всегда будет одинаковым.
setState() - синхронный или асинхронный метод?
Метод setState() - асинхронный.
Как мы можем условно отрендерить JSX в React?
- Мы не можем использовать if…else внутри JSX. Но мы можем динамически возвращать элементы React в зависимости от условия.
if(isLoggedIn) { return } else { return }
- Другой способ - использовать логические операторы для реализации встроенного if.
<div>
{count > 10 && }
</div>
- Мы можем реализовать встроенный if…else с помощью тернарного оператора JavaScript.
{ isLoggedIn ? : }
Если компоненту ничего не нужно отрисовывать, что мы можем сделать?
Метод render() или функциональный компонент может возвращать значение null.
Почему мы предоставляем ключевой атрибут для списка объектов?
Ключи помогают React понять, какие элементы были изменены, добавлены или удалены.
Что такое контролируемый компонент в React?
В контролируемом компоненте значение элемента формы ввода контролируется React.
Что такое React?
React — это библиотека JavaScript с открытым исходным кодом, созданная Facebook для разработки сложных интерактивных пользовательских интерфейсов в веб- и мобильных приложениях. Основная цель React — создание компонентов пользовательского интерфейса
Что такое Виртуальная DOM?
виртуальная модель DOM представляет собой дерево узлов, в котором элементы, их атрибуты и содержимое перечислены в виде объектов и свойств.
Всякий раз, когда что-либо изменяется, весь пользовательский интерфейс сначала ре-рендерится в виртуальном представлении DOM. Вычисляется разница между предыдущим виртуальным представлением DOM и текущим. “Настоящий” DOM обновляется с учетом того, что действительно изменилось. Обновление виртуального DOM происходит очень быстро по сравнению с ре-рендерингом в реальном браузере. Следовательно, производительность улучшается.
Какие существуют фазы жизненного цикла компонентов React?
Существует четыре различных этапа жизненного цикла компонента React:
Инициализация: На этом этапе компонент React готовит установку начального состояния и параметров по умолчанию.
Монтирование: Компонент React готов для монтирования в DOM браузера. Этот этап охватывает методы жизненного цикла componentWillMount и componentDidMount.
Обновление: На этом этапе компонент обновляется двумя способами, отправляя новые свойства и обновляя состояние. Этот этап охватывает методы жизненного цикла shouldComponentUpdate, componentWillUpdate и componentDidUpdate.
Размонтирование: На этом последнем этапе компонент не нужен и отключается из DOM браузера. Этот этап включает метод жизненного цикла componentWillUnmount.
Как работает React?
React создает виртуальную DOM. Когда состояние изменяется в компоненте, он сначала запускает алгоритм «различий», который определяет, что изменилось в виртуальной DOM. Вторым шагом является согласование, при котором обновляется DOM с результатами сравнения отличий.
Какая разница между Элементом и Компонентом в React?
Проще говоря, элемент в React описывает то, что вы хотите видеть на экране. Если точнее, то элемент в React является объектным представлением некого пользовательского интерфейса.
Компонент в React является функцией или классом, который при необходимости принимает данные и возвращает элемент (обычно в виде JSX, который преобразуется в вызов createElement)
Когда вам использовать Class Component вместо Functional Component?
Если ваш компонент имеет состояние или содержит используемые методы значимые для компонента, то используйте Class component. В других случаях используйте Functional component.
В чем разница между createElement и cloneElement?
createElement мы получаем из JSX и его React использует для создания элементов (объектное представление некоторого интерфейса). cloneElement используется для клонирования элемента и отправки ему новых параметров.
У нас есть фрагмент кода JSX:
const content = ( <div> <h1>Backbencher</h1> </div> );
Напишите чистый код JavaScript после преобразования JSX в JavaScript.
const content = React.createElement( "div", {}, React.createElement("h1", {}, "Backbencher") );
Опишите аргументы метода React.createElement().
React.createElement() принимает три аргумента: createElement(tag, attributes, children)
Первый параметр - это тег или компонент для визуализации.
Второй параметр принимает объект. Пара ключ-значение объекта формирует список атрибутов тега.
Третий параметр может быть строкой или другим компонентом, который должен быть вложен в текущий тег или компонент. Вот пример.
React.createElement(“div”, {id: “hello”}, “Backbencher”) становится -
<div>Backbencher</div>
Что такое JSX? В чем преимущество его использования?
JSX позволяет создавать HTML-элементы прямо в JavaScript и помещать их в DOM без использования таких методов, как createElement() или appendChild(). JSX преобразует HTML-теги в элементы React. React использует JSX для шаблонизации вместо обычного JavaScript. Использовать JSX не обязательно, однако он предоставляет несколько преимуществ:
Он быстрее благодаря оптимизации во время компиляции кода в JavaScript.
Он также является “типобезопасным”, большинство ошибок перехватываются во время компиляции.
Он позволяет легче и быстрее создавать шаблоны.
JSX - это выражения JavaScript
JSX-выражения являются валидными JavaScript-выражениями. После компиляции, они становятся обычными объектами. Например, приведенный ниже код:
const hello = <h1> Привет, народ </h1> Компилируется в -
const hello = React.createElement { type: "h1", props: { className: "greet", children: "Привет, народ" } }
Поскольку JSX компилируется в объекты, он может использоваться наравне с обычными выражениями JavaScript.
Напишите пример функционального компонента React.
В React функциональный компонент - это функция JavaScript, которая возвращает элемент React.
function Banner() { return ( <h1>Backbencher</h1> ) }
Что такое propsв компоненте?
Когда React видит элемент, представляющий собой определяемый пользователем компонент, он передает атрибуты и дочерние элементы JSX этому компоненту как единый объект. Мы обращаемся к этому объекту как к props
Здесь у нас есть функциональный компонент.
function Banner(props) { return ( <h1>{props.name}</h1> ) }
Преобразуйте приведенный выше код в компонент класса.
class Banner extends React.Component { render() { return ( <h1>{this.props.name}</h1> ) } }
У нас есть компонент класса.
class Banner extends React.Component {
state = {
text: “”
}
incrementCount = () => {
this.state.text = “Backbencher”;
}
render() { return ( <div> Click <h1>{this.state.text}</h1> </div> ) } }
Когда кнопка нажата, она должна отображать текст «Backbencher». Но этого не происходит. В чем причина?
В данном случае state неправильно обновляется.
Значение state должно обновляться через this.setState().
Лишь тогда UI ре-рендерится.
incrementCount должен обновляться так:
incrementCount = () => { this.setState({ text: "Backbencher" }) }
Следующий код дает неожиданный результат.
this.setState({
counter: this.state.counter + this.props.increment,
});
Что может быть причиной? Как это исправить?
Поскольку setState() является асинхронным, установка нового состояния на основе предыдущего состояния иногда может пойти не так. В таких сценариях мы можем использовать синтаксис функции обратного вызова для установки состояния.
this.setState((prevState, props) => { return { counter: prevState.counter + props.increment } })
В компоненте класса мы установили начальное состояние как:
state = {
name: “Backbencher”,
age: 23
}
Затем мы обновляем состояние с помощью следующего кода:
this.setState({
age: 24
});
Каким будет текущее значение объекта состояния?
Состояния объединены в компоненты класса. Таким образом, значение состояния будет:
{
name: “Backbencher”,
age: 24
}
Здесь у нас есть компонент класса:
class Banner extends React.Component {
state = {
country: “India”
}
constructor(props) {
super(props);
}
logMessage() {
console.log(this.state.country);
}
render() { return ( <div> Click </div> ) } }
При нажатии кнопки отображается сообщение об ошибке вместо отображения “India”.
Uncaught TypeError: Cannot read property ‘state’ of undefined
В чем проблема и как ее решить?
Здесь функция logMessage вызывается в случае нажатия кнопки. Так как эта функция не является стрелочной, значение this внутри функции равно undefined. Мы пытаемся получить значение state от undefined. Из-за этого возникает TypeError.
Мы можем решить эту проблему, явно привязав logMessage к классу компонента, используя метод bind.
constructor(props) {
super(props);
this.logMessage = this.logMessage.bind(this);
}
Мы также можем изменить logMessage на стрелочную функцию для решения этой проблемы.
logMessage = () => {
console.log(this.state.country);
}