React JS

Какая интересная особенность есть у хука 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 не может быть помещено на страницу, так как это объект

• Между перечислением свойств компонента нужно ставить точку с запятой

• Заголовок и ссылка в компоненте обязаны быть обернуты в реакт-фрагмент

Свойства компонента в реакте по своей структуре -

• массив

• разные типы данных, в зависимости от того, что было передано

• объект

• кортеж