Font size
WorksheetsReact JS
Total questions: 15
Worksheet time: 12mins
Какая интересная особенность есть у хука useRef()?
Как начальное значение он может получать любой тип данных
У него нет свойства current
Он позволяет создавать ссылку даже на уже удаленные элементы в DOM-дереве
Он позволяет сохранять объект, значение которого хранится в течении жизни всего компонента
Какая логическая ошибка допущена в этом коде?
const elems = data.map(({text, id, class}, i) => {
return <ItemList key={i} className={class}>{text}</ItemList>})
Неправильная деструктуризация перебираемого объекта
Неправильное использование атрибута key, в него стоит поместить id
Неправильная деструктуризация перебираемого объекта
Необходимо компонент ItemList обернуть в круглые скобки
Что возвращает хук useState при запуске?
Две переменные
Массив
Объект
Переменную и функцию для её изменения
Что такое ref?
Это ссылка на элемент в DOM-дереве
Это объект события, которое выполнилось на странице
Это ссылка на контекст вызова компонента
Это объект со всеми свойствами элемента на странице
Как правильно импортировать и использовать изображение в компоненте?
1. import img from 'somepic.jpg';
2.
3. <img src="img" />
·
1. import 'somepic.jpg';
2.
3. <img src={img} /}
1. import img from 'somepic.jpg';
2.
3. <img src={img} />
1. import {img} from 'somepic.jpg';
2.
3. <img src={img} />
Какой из способов изменения состояния нарушает принцип иммутабельности?
this.state = {data: [2, 5, 6, 7, 3]}
1. this.setState(({data}) => ({
2. data: data.filter(item => item > 3)
3. }))
1. this.setState(({data}) => ({
2. data: data.splice(0, 2)
3. }))
1. this.setState(({data}) => ({
2. data: [...data, 5, 6]
3. }))
1. const nums = [7, 7, 7];
2. this.setState(({data}) => ({
3. data: [...nums, ...data]
4. }))
Каким способом можно не потерять контекст вызова у обработчиков событий в компонентах?
Использовать метод bind для привязывания контекста. Например:
this.next = this.next.bind(this)
Использовать стрелочные функции при создании методов класса. Например:
1. next = () => {
2. ///
3. }
Использовать стрелочную функцию прямо в обработчике событий. Например:
<button onClick={() => this.next()}>Click me</button>
Все вышеперечисленные варианты
В чем смысл передачи коллбэк-функции во внутрь setState?
this.state = {
salary: 500}
this.setState(state => ({
salary: state.salary + 500
7. }))
Для мгновенного изменения состояния без асинхронности
Для отложенного изменения стэйта, когда его нужно сделать после определенных действий
Никакой разницы нет. То же самое, что и
1. this.setState({
2. salary: this.state.salary + 500
3. })
Для соблюдения четкого порядка выполнения команд, когда нам важно предыдущее значение стэйта
В чем ошибка в этом компоненте и его использовании?
1. function Profile({name, surname, link}) {
2. return (
3. <div>
4. <h1>My name is {name}, surname - {surname}</h1>
5. <a href={link} >My profile</a>
6. </div>
7. )
8. }
9.
10. <Profile name={{firstName: 'John'}} surname='Smith' link='facebook.com'/>
Компонент обязан быть классом
Свойство name не может быть помещено на страницу, так как это объект
Между перечислением свойств компонента нужно ставить точку с запятой
Заголовок и ссылка в компоненте обязаны быть обернуты в реакт-фрагмент
Свойства компонента в реакте по своей структуре -
массив
разные типы данных, в зависимости от того, что было передано
объект
кортеж
Как называется данная структура в React?
1. const Header = (props) => {
2. return <h1>{props.text}</h1>
3. }
React стркутура
Компонент
React элемент
Композиция
В чем разница классовых компонентов и функциональных ?
Что такое Хуки?
Как вы оцениваете свой проект?
на 12
ниже 6
на 10
на 10000 тыщ баллов
на 9
Ктоооо проживает на дне океана?
(a)
