(В)Что такое ReactJS?
ReactJS — это библиотека JavaScript, используемая для создания повторно используемых компонентов для уровня представления в архитектуре MVC. Он очень эффективен и использует виртуальный DOM для рендеринга компонентов. Он работает на стороне клиента и написан на JSX.
(В)Объясните архитектуру MVC?
Платформа Модель-Представление-Контроллер (MVC) представляет собой шаблон архитектуры/проектирования, который разделяет приложение на три основных логических компонента: Модель, Представление и Контроллер. Каждый архитектурный компонент создан для обработки конкретных аспектов разработки приложения. Он изолирует уровень бизнеса, логики и представления друг от друга.
(В) Объясните составные части React?
Пять основных строительных блоков React:
- Компоненты. Это повторно используемые блоки кода, возвращающие HTML.
- JSX: означает JavaScript и XML и позволяет писать HTML в React.
- Props и State: реквизиты аналогичны параметрам функции, а State аналогичны переменным.
- Контекст: позволяет передавать данные через компоненты как реквизиты в иерархии.
- Виртуальный DOM: это облегченная копия фактического DOM, которая упрощает манипулирование DOM.
(В) Объясните виртуальный DOM и дайте практический обзор того, как React отображает его в DOM.
Virtual DOM — интересная концепция; это сложная идея, которая сводится к гораздо более простому алгоритму.
Если в React мы создадим простой класс ES6 и распечатаем его, у нас будет функция (поскольку все функции могут использоваться в качестве конструктора в JavaScript):
const app = () => {
let React = react,
{Component} = React,
DOM = reactDom
class Comments extends Component {
constructor(props){ super(props) }
render(){ return <div>test</div> }
}
console.log(Comments)
}
require('react', 'react-dom').then(app)
console.log(Comments) дает нам что-то похожее на это (после компиляции Babel из ES6 в ES5):
function Comments(props) {
_classCallCheck(this, Comments);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Comments).call(this, props));
}
Когда мы пишем что-то для отображения компонента React на экране, у нас может быть что-то вроде следующего:
DOM.render(<Comments />, document.body)
JSX также переносится в ES5 с помощью Babel:
DOM.render(React.createElement(Comments, null), document.body);
Мы видим, что <Comments /> транслируется непосредственно в React.createElement(Comments, null). Здесь мы можем увидеть, что на самом деле представляет собой объект Virtual DOM: простой объект JavaScript, который представляет тег, отображаемый на экране.
Давайте проверим вывод React.createElement():
console.log(<div/>)
// or
console.log(React.createElement('div', null))
Это дает нам:
{"type":"div","key":null,"ref":null,"props":{},"_owner":null,"_store":{}}
Видите, что type является строкой? DOM.render({...}) получает этот объект выше, смотрит на type и решает, следует ли повторно использовать существующий элемент <div> в DOM или создать новый <div> и добавить его.
Virtual DOM — это не просто Object — это рекурсивная структура. Например, если мы добавим два элемента под <div/>:
console.log(<div><span/><button/></div>)
// or
console.log(React.createElement(
'div',
null,
React.createElement('span', null),
React.createElement('button', null)
))
Мы получаем вложенное дерево объектов:
{
"type":"div",
"key":null,
"ref":null,
"props":{
"children": [
{"type":"span","key":null,"ref":null,"props":{}},
{"type":"button","key":null,"ref":null,"props":{}}
]
}
}
Вот почему в коде компонента React мы можем получить доступ к дочерним и родительским элементам через this.props.children. Что React будет делать, так это спускаться по очень глубокому дереву вложенных объектов (в зависимости от сложности вашего пользовательского интерфейса), каждый из которых находится в children своего родительского элемента.
Следует отметить, что type до сих пор была просто строкой. Когда элемент React создан из пользовательского компонента (например, Comments выше), type является функцией:
console.log(<Comments />) // or console.log(React.createElement(Comments, null))
дает нам:
{
"key":null,
"ref":null,
"props":{},
“type”: function Component() { ... }
}
(В) Каково значение ключей в React?
Ключи в React используются для идентификации уникальных элементов VDOM с соответствующими им данными, управляющими пользовательским интерфейсом; их наличие помогает React оптимизировать рендеринг за счет повторного использования существующих элементов DOM. Давайте рассмотрим пример, иллюстрирующий это.
У нас есть два <TwitterUser> компонента, отображаемые на странице, отрисованные в порядке убывания количества подписчиков:
----------- | A - 103 | ----------- ----------- | B - 92 | -----------
Предположим, что B получает 105 подписчиков в Твиттере, поэтому приложение выполняет повторную визуализацию и меняет порядок A и B:
----------- | B - 105 | ----------- ----------- | A - 103 | -----------
Без ключей React в первую очередь перерисовывал бы оба элемента <TwitterUser> в DOM. Он будет повторно использовать элементы DOM, но React не будет переупорядочивать элементы DOM на экране.
С помощью ключей React фактически меняет порядок элементов DOM вместо того, чтобы отображать множество вложенных изменений DOM. Это может значительно повысить производительность, особенно если используемые элементы DOM и VDOM/React требуют больших затрат на рендеринг.
Сами ключи должны представлять собой уникальный номер или строку; поэтому, если компонент React является единственным дочерним элементом со своим ключом, то React будет переназначать элемент DOM, представленный этим ключом, в будущих вызовах render().
Давайте продемонстрируем это на простом списке задач, созданном с помощью React.
class List extends Component {
constructor(p){
super(p)
this.state = {
items: Array(5).fill(1).map((x,i) => ({id:i}))
}
}
componentDidMount(){
const random = (a,b) => Math.random() < .5 ? -1 : 1
setInterval(() => {
this.setState({
items: this.state.items.sort(random)
})
}, 20)
}
render() {
let {items} = this.state
return <ul>
{items.map(item =>
<li key={item.id}>{item.id}</li>)}
</ul>
}
}
DOM.render(<List />, document.body)
setInterval(), возникающий при монтировании, меняет порядок массива items в this.state каждые 20 мс. С точки зрения вычислений, если React меняет порядок элементов в состоянии, он будет манипулировать самими элементами DOM, а не «перетаскивать» их между позициями в <ul>.
Здесь стоит отметить, что если вы визуализируете однородный массив дочерних элементов — например, <li> выше — React фактически console.warn() уведомит вас о потенциальной проблеме, предоставив трассировку стека и номер строки для отладки. Вам не придется беспокоиться о том, что React незаметно сломается.
(В) Каковы преимущества React JS?
Преимущества React заключаются в следующем.
- Использование JSX упрощает чтение и написание кода.
- Улучшает производительность приложений за счет использования виртуального DOM.
- Обеспечивает более простой способ интеграции с фреймворками.
- Его можно использовать совместно и отображать как на сервере, так и на стороне клиента.
- Написание интеграционных и модульных тестов можно упростить с помощью инструментов.
(В) Как браузеры читают JSX?
В общем, браузеры не способны читать JSX и способны читать только чистый JavaScript. Веб-браузеры читают JSX с помощью транспилятора. Транспиляторы используются для преобразования JSX в JavaScript. Используемый транспилятор называется Babel.
(В) Как написать комментарий в React?
В React есть два способа написания комментариев.
- Многострочный комментарий. Мы можем писать многострочные комментарии в React, используя формат звездочки /* */.
- Однострочный комментарий. В React мы можем писать одиночные комментарии, используя двойную косую черту //.
(В) Что такое состояние в React?
Состояние — это экземпляр класса компонента React, который можно определить как объект набора наблюдаемых свойств, которые управляют поведением компонента. Другими словами, состояние компонента — это объект, содержащий некоторую информацию, которая может измениться в течение срока службы компонента.
(Q)Объясните реквизиты в React?
React позволяет нам передавать информацию компоненту, используя так называемые реквизиты (что означает свойства). Реквизиты — это объекты, которые можно использовать внутри компонента.
Мы можем получить доступ к любому реквизиту внутри класса компонента, которому передается реквизит. Доступ к реквизитам можно получить, как показано ниже:
this.props.propName;
(Q)Что такое компонент более высокого порядка в React?
Компоненты высшего порядка или HOC — это расширенный метод повторного использования логики функциональности компонента. Он просто берет исходный компонент и возвращает улучшенный компонент. HOC полезны, поскольку их легко кодировать и читать. Кроме того, помогает избавиться от копирования одной и той же логики в каждом компоненте.
(В) Каковы жизненные циклы ReactJS?
- Инициализация
- Обновления состояния/имущества
- Разрушение
(Q)Когда был выпущен ReactJS?
Март 2013 г.
(В) Объясните одностороннюю привязку данных в React?
ReactJS использует одностороннюю привязку данных, которая может быть компонентом к представлению или просмотром к компоненту. Он также известен как односторонний поток данных, что означает, что данные имеют один и только один способ передачи в другие части приложения. По сути, это означает, что дочерние компоненты не могут обновлять данные, поступающие от родительского компонента. Его легко отлаживать и он менее подвержен ошибкам.
(В) Объясните положительные и отрицательные стороны компонентов мелкого рендеринга в тестах.
Положительные стороны:
- Быстрее выполнить поверхностную визуализацию компонента, чем полную его визуализацию. Когда проект React содержит большое количество компонентов, эта разница в производительности может существенно повлиять на общее время, необходимое для выполнения модульных тестов.
- Поверхностный рендеринг предотвращает тестирование за пределами тестируемого компонента — лучшая практика модульного тестирования.
Негативы:
- Поверхностный рендеринг менее похож на реальное использование компонента как части приложения, поэтому он может не выявить определенные проблемы. Возьмем пример компонента
<House />, который отображает компонент<LivingRoom />. Если в реальном приложении компонент<LivingRoom />сломан и выдает ошибку, то<House />не сможет отобразиться. Однако если модульные тесты<House />используют только поверхностную отрисовку, эта проблема не будет выявлена, если<LivingRoom />также не охвачен модульными тестами.
Спасибо вам
