Как запустить повторный рендеринг компонента без вызова функции setState()?

Использование forceUpdate()
В следующем примере при монтировании компонента генерируется случайное число. При нажатии кнопки вызывается функция forceUpdate(), что, в конечном счете, заврешается генерацией нового случайного числа:

 import React, { Component } from 'react'

 class App extends React.Component{
   constructor() {
     super()
     this.forceUpdateHandler = this.forceUpdateHandler.bind(this)
   }

   forceUpdateHandler() {
     this.forceUpdate()
   }

   render() {
     return (
       <div>
         <button onClick={this.forceUpdateHandler}>Принудительное обновление</button>
         <h4>Случайное число: { Math.random() }</h4>
       </div>
     )
   }
}

 export default App

Обратите внимание: использовать forceUpdate() не рекомендуется.

👉 @frontendInterview

👉 @frontendInterview

В чем разница между обычной функцией и функциональным выражением?

Допустим, у нас есть следующее:

 hoistedFunc()
 notHoistedFunc()

 function hoistedFunc(){
     console.log('I am hoisted')
 }

 var notHoistedFunc = function(){
     console.log('I will not be hoisted!')
 }

Вызов notHoistedFunc приведет к ошибке, а вызов hoistedFunc нет, потому что hoistedFunc «всплывает», поднимается в глобальную область видимости, а notHoistedFunc нет.

👉 @frontendInterview

👉 @frontendInterview

​В чем разница между componentDidMount() и componentWillMount()?

componentDidMount() выполняется после первого рендеринга только на стороне клиента. Это подходящее место для выполнения AJAX-запросов и обновления состояния. Данный метод также используется для интеграции с другими JavaScript-фремворками и любыми функциями с отложенным выполнением, такими как setTimeout() или setInterval().

Пример

 React, { Component } from 'react'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: 'Иван Петров'
    }
  }

  getData(){
    setTimeout(() => {
      console.log('Данные получены')
      this.setState({
        data: 'Привет, Иван!'
      })
    }, 1000)
  }

  componentDidMount() {
    this.getData()
  }

  render() {
    return (
      <div>
        {this.state.data}
      </div>
    )
  }
}

export default App

componentWillMount() выполняется перед рендерингом, как на стороне сервера, так и на стороне клиента. Данный метод используется для программного выполнения задач перед монтированием компонента.

Пример
import React, { Component } from 'react'

class App extends Component {
constructor(props) {
super(props)
this.state = {
data: 'Иван Петров'
}
}
componentWillMount() {
console.log('Сначала вызывается этот метод')
}

getData() {
setTimeout(() => {
console.log('Данные получены')
this.setState({
data: 'Привет, Иван!'
})
}, 1000)
}

componentDidMount() {
this.getData()
}

render() {
return (
<div>
{this.state.data}
</div>
)
}
}

export default App

👉 @frontendInterview

👉 @frontendInterview

Рефакторинг кода на JavaScript

Мартин Фаулер и другие высококлассные специалисты в области объектно-ориентированного программирования, принявшие участие в написании этой книги, изложили принципы и наиболее эффективные методики выполнения различных рефакторингов и показали, когда и как следует тщательно изучать код с целью его улучшения.

👉 @frontendInterview

Простая математика

Вам дана строка, содержащая цифры и математические операторы (plus и minus).
Вам нужно произвести математические операции и вернуть результат.

Примеры:
"1plus2plus3plus4" --> "10"
"1plus2plus3minus4" --> "2"

👉 @frontendInterview

Отзывчивый веб-дизайн

Книга, написанная практиком для практиков. Она содержит рекомендации, как избежать наиболее распространенных ошибок и создать сайт, который будет удовлетворять требованиям любого пользователя. Кроме того, в ней даны программные коды, которые позволят применить на практике все предложенные разработки.

👉 @frontendInterview

​На что обратить внимание при разработке мультиязычных сайтов?

1. Используйте атрибут lang в HTML.

2. Перенаправляйте пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.

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

4. Ограничение длины слов и предложений. Некоторый контент может быть длиннее при написании на другом языке. Будьте внимательны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.

5. Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.

6. Форматируете даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в Америке или «31 мая 2012» в большинстве стран Европы.

7. Не склеивайте переведенные строки. Не пишите что-то вроде "Сегодняшняя дата " + date. Эта фраза будет выглядеть коряво на языках с другим порядком слов. Вместо этого используйте параметры шаблона.

8. Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.

👉 @frontendInterview

👉 @frontendInterview

Что делает DOCTYPE?

DOCTYPE — это сокращение от «document type» (тип документа). Он объявляется в HTML для того, чтобы различать стандартный режим или режим совместимости (quirks mode). Его наличие говорит браузеру работать со страницей в стандартном режиме.

При стандартной работе с html документом просто добавляйте <!DOCTYPE html> в начало страницы.

👉 @frontendInterview

Буквы

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

Примеры:
"Chicago" --> "c:**,h:*,i:*,a:*,g:*,o:*"
"Bangkok" --> "b:*,a:*,n:*,g:*,k:**,o:*"
"Las Vegas" --> "l:*,a:**,s:**,v:*,e:*,g:*"

👉 @frontendInterview