​Как привязать функцию к экземпляру компонента в React?

Существует несколько способов предоставить функции доступ к свойствам компонента, таким как props и state.

Синтаксис полей класса

 class App extends Component {
   // обратите внимание: данный синтаксис является экспериментальным и пока не стандартизирован
   handleClick = () => {
     console.log('Произошло нажатие кнопки')
   }
   render() {
     return <button onClick={this.handleClick}>Нажми на меня</button>
   }
 }

Привязка в методе render()

 class App extends Component {
   handleClick() {
     console.log('Произошло нажатие кнопки')
   }
   render() {
     return <button onClick={this.handleClick.bind(this)}>Нажми на меня</button>
   }
 }

Обратите внимание: использование Function.prototype.bind() в методе render() приводит к созданию функции при каждом рендеринге компонента, что потенциально может повлечь проблемы с производительностью.

Стрелочная функция в методе render()

 class App extends Component {
   handleClick() {
     console.log('Произошло нажатие кнопки')
   }
   render() {
     return <button onClick={() => this.handleClick()}>Нажми на меня</button>
   }
 }

Обратите внимание: использование стрелочной функции в методе render() также приводит к созданию функции при каждом рендеринге компонента, что может нивелировать оптимизацию, основанную на проведении строгого сравнения состояния и пропов.

👉 @frontendInterview

👉 @frontendInterview

Что представляют собой .map-файлы в TypeScript?

Файлы с расширением .map хранят карты кода (source map), которые содержат данные о соответствии кода, написанного на TypeScript, JavaScript-коду, созданному на его основе. С этим файлами могут работать многие отладчики (например — Visual Studio и инструменты разработчика Chrome). Это позволяет, в ходе отладки, работать с исходным кодом программ на TypeScript, а не с их JS-эквивалентами.

👉 @frontendInterview

Наибольшее и наименьшее

Вам дана строка, состоящая из цифр, разделенных пробелами. Напишите функцию, которая обработает строку и вернет наибольшее и наименьшее число.

Примеры:
highAndLow("1 2 3 4 5"); // return "5 1"
highAndLow("1 2 -3 4 5"); // return "5 -3"
highAndLow("1 9 3 4 -5"); // return "9 -5"

👉 @frontendInterview

👉 @frontendInterview

​Как передавать параметры в обработчик событий или функцию обратного вызова в React?

Для того, чтобы передать параметр в обработчик событий, можно обернуть его в стрелочную функцию:

 onClick={() => this.handleClick(id)} />

Это является эквивалентом вызова bind():

 onClick={this.handleClick.bind(this, id)} />

Пример
const A = 65 // ASCII-код символа

class Alphabet extends React.Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
this.state = {
justClicked: null,
letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i))
}
}
handleClick(letter) {
this.setState({ justClicked: letter })
}
render() {
return (
<div>
Только что была нажата клавиша {this.state.justClicked}
<ul>
{this.state.letters.map(letter =>
<li key={letter} onClick={() => this.handleClick(letter)}>
{letter}
</li>
)}
</ul>
</div>
)
}
}

👉 @frontendInterview

👉 @frontendInterview

Что такое геттеры и сеттеры в TypeScript?

TypeScript поддерживает геттеры и сеттеры, которые позволяют управлять доступом к членам объектов. Они дают разработчику средства контроля над чтением и записью свойств объектов.

class foo {
private _bar:boolean = false;

get bar():boolean {
return this._bar;
}
set bar(theBar:boolean) {
this._bar = theBar;
}
}

var myBar = myFoo.bar; // здесь вызывается геттер
myFoo.bar = true; // здесь вызывается сеттер

👉 @frontendInterview

Заводы - рабочим, либы - фронтендерам!

Хороший фронтендер может закодить что угодно

Senior знает как сделать это быстрее, используя готовые решения

Читай Frontender Libs по 5 мин в день и ты станешь гуру в фронтенд либах

​Как предотвратить слишком ранний вызов функции?

Throttle
Данная техника предотвращает вызов функции более одного раза за определенный промежуток времени. В примере ниже обработчик события нажатия кнопки срабатывает не чаще одного раза в секунду.

 import { throttle } from 'lodash'

 class LoadMoreButton extends React.Component {
   constructor(props) {
     super(props)
     this.handleClick = this.handleClick.bind(this)
     this.handleClickThrottled = throttle(this.handleClick, 1000)
   }

   componentWillUnmount() {
     this.handleClickThrottled.cancel()
   }

   render() {
     return <button onClick={this.handleClickThrottled}>Загрузить еще</button>
   }

   handleClick() {
     this.props.loadMore()
   }
 }

Debounce
Данная техника позволяет обеспечить вызов функции только по истечении определенного времени с момента ее последнего вызова. Это может быть полезным, когда необходимо выполнять "дорогие" вычисления в ответ на событие, которое возникает очень часто (например, событие прокрутки или нажатия клавиши).

В примере ниже ввод текста задерживается на 250 мс:
import { debounce } from 'lodash'

class Searchbox extends React.Component {
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
this.emitChangeDebounced = debounce(this.emitChange, 250)
}

componentWillUnmount() {
this.emitChangeDebounced.cancel()
}

render() {
return (
<input
type="text"
onChange={this.handleChange}
placeholder="Поиск..."
defaultValue={this.props.value}
/>
)
}

handleChange(e) {
this.emitChangeDebounced(e.target.value)
}

emitChange(value) {
this.props.onChange(value)
}
}

👉 @frontendInterview

HTML5. Недостающее руководство

Доступно и в занимательной форме рассказано, как HTML превратился в HTML5.
Рассмотрены семантические элементы и новые стандарты языка.
Описано, как создавать современные веб-страницы, в том числе улучшенные веб-формы, поддерживать аудио и видео, рисовать на холсте, совершенствовать оформление веб-страниц с помощью CSS3. Даны практические рекомендации по созданию интеллектуальных веб-приложений, хранению данных, разработке автономных приложений. Показано, как реализовать взаимодействие с веб-сервером, геолокацию, фоновые вычисления , управление историей просмотров и браузерную совместимость с элементами HTML5.

👉 @frontendInterview

Среднее значение

Напишите функцию, которая вернет среднее значение чисел из данного массива, округлённое вниз. При этом, вам запрещено использовать любые циклы.

Пример:
[90,98,89,100,100,86,94] => 94

👉 @frontendInterview

Интерфейс. Основы проектирования взаимодействия

Алан Купер начал работу над первым изданием этой книги 20 лет назад. Он убеждал программистов в том, что пришла пора шагнуть навстречу пользователям и начать писать программы, которые будут им нравиться. В наши дни сложилась совершенно иная ситуация — оцифровка всех видов информации заставила пользователей с головой окунуться в новые технологии. Четвертое издание книги учитывает все изменения в отрасли, произошедшие за последние семь лет, с сохранением всех идей из предыдущих изданий, не потерявших актуальности.
Проектирование взаимодействия — это ориентированный на человека подход проектирования интерактивных цифровых продуктов, сред, систем и сервисов. Много внимания уделено проектированию поведения — аспекту, которым традиционные дисциплины проектирования нередко пренебрегают.

👉 @frontendInterview