askhat

Не благодари

const monthToInt = val => {
  val = val.toLowerCase();
  switch (true) {
    case !!val.match(/^янв/):  return 0;
    // TODO добавить больше кейсов
  }
}

const dateFromLocaleString = date =>
  new Date(
    ...date
      .split(" ")
      .reduce(
        (acc, val) =>
          (acc = [val.match(/\D/) ? monthToInt(val) : parseInt(val), ...acc]),
        []
      )
  )

dateFromLocaleString('07 янв 2019')

На вопрос ответил автор вопроса, я в свою очередь попытаюсь объяснить что произошло.

Рендер в реакте всегда идёт по наименее трудозатратному пути, а именно вычисляет дельту (разницу) между новым стейтом и предыдущим, если таковой имеется. Например:

class TodoList extends React.Component {
  state = {
    todos: [
      'Commit',
      'Push'
    ]
  }
  render() {
    return <ul>
      {this.state.todos.map(item => {
        return <li>{ todo }</li>
      }
    </ul>
  }
}

Если стейт компонента изменится, скажем при добавление элемента в начало списка todos, так что он станет таким:

const todos = [
  'Init',
  'Commit',
  'Push'
]

Реакт вычислит два древа VirtualDOM:

// Начальный стейт
<ul>
  <li>Commit</li>
  <li>Push</li>
</ul>
// Добавлен элемент
<ul>
  <li>Init</li> // <- разница начинается здесь и до конца древа
  <li>Commit</li>
  <li>Push</li>
</ul>

Здесь выполняется работа которой можно было бы избежать. К примеру если бы элемент был добавлен в конец списка:

const todos = [
  'Commit',
  'Push',
  'Merge'
]

То реакт получил бы на сравнение другие два древа элементов:

// Начальный стейт
<ul>
  <li>Commit</li>
  <li>Push</li>
</ul>
// Добавлен элемент
<ul>
  <li>Commit</li>
  <li>Push</li>
  <li>Merge</li> <- разница начинается здесь, от начала и до сих по ничего не менялось
</ul>

Дельта этих двух списков меньше, а значит и работы нужно сделать меньше.

Совершенно очевидно что <li>Commit</li> и <li>Push</li> не менялись, однако реакт недостаточно умён чтобы это понять. Чтобы помочь ему следует воспользоваться специальным пропом key={}. Он может быть значением любого типа, единственно требование — значение должно стабильно идентифицировать соответствующие данные.

Если бы компонент выглядел так:

class TodoList extends React.Component {
  state = {
    todos: [
      { id: 0, text: 'Commit' },
      { id: 1, text: 'Push' }
    ]
  }
  render() {
    return <ul>
      {this.state.todos.map(item => {
        return <li key={todo.id}>{ todo.text }</li>
      }
    </ul>
  }
}

То добавление элемента в начало массива, породило бы следующий стейт:

const todos = [
  { id: 2, text: 'Init' },
  { id: 0, text: 'Commit' },
  { id: 1, text: 'Push' }
]

И, снова, два древа элементов:

// Начальный стейт
<ul>
  <li>Commit</li> // id 0
  <li>Push</li> // id 1
</ul>
// Добавлен элемент
<ul>
  <li>Init</li> // id 2 новый элемент отобразится в начале
  <li>Commit</li> // id 0
  <li>Push</li> // id 1 
</ul>

Благодаря подсказке, реакт не учтёт в дельте элементы чьи идентификаторы не изменились, и, как следствие, не будет делать лишних действий.

Таким образом использовать индекс в массиве в качестве ключа — не лучшая идея, особенно если массив будет меняться. По той же причине не следует использовать Math.random() в качестве ключа, так вы почти гарантировано будете всегда получать нестабильные идентификаторы.

Подробнее об этом можно почитать здесь — Reconciliation.

const { name, email } = obj

Просто не создавайте идентификатор под это свойство

Сниппет кода который вы привели, очень похож на общее представление о веб-компоненте. Если класс CategoiesFilter расширит класс React.Component, вам будет нужно реализовать метод render. Тогда вы сможете избавиться от селекторов по заранее написанному html.
Опционально вы сможете реализовать методы т.н. хуки жизненного цикла, тогда вы получите более тонкий контроль.
Говорят пользователи Vue используют очень похожий подход к моделированию, но пользуются более гибким синтаксисом рендер функции (они просто пишут html и css.)
Если речь идёт о более крупных приложениях, часто испозуют redux и mobx. Они реализуют похожие паттерны flux и observable. Но это уже совсем другая история.
Смысл всех этих технологий в Virtual DOM. Он позволяет не писать все состояния вашего приложения сразу в html, а вычислят его на основе данных в JavaScript и только тогда создавать html наиболее оптимальным образом.

В идеальном мире у вас есть абстракция http клиента в которой вы легко меняете реализацию без изменений в остальном коде

<img v-for="item in menu" :src="item.image"/>

function uid (alphabet, n) {
  let string = ''
  for (let i = 0; i < n; i++) {
    string += alphabet[Math.floor(Math.random() * alphabet.length)]
  }
  return string
}

Берите nanoid и не мучайтесь

You might not need Jquery

window.getSelection().toString()

Эквивалентно

var URL
if (window.URL) {
  URL = window.URL
} else {
  URL = window.webkitURL
}

const tmp = '{ "qwerty": "1234567890" }';
console.log(JSON.parse(tmp).qwerty);        // OK --- 1234567890

// Потому что синтаксис другой
var id = 'qwerty';
console.log(JSON.parse(tmp)[id]);        // OK --- 1234567890

You might not need jQuery

document.querySelector('.tovar1 select').onchange = e => console.log(e.target.value)

<button class="slowly" data-target="some_id">Take me there but slowly</button>

$(".slowly").on("click", function (event) {
      /*Отменяем стандартную обработку нажатия по ссылке.*/
      event.preventDefault();
      /*Забираем идентификатор блока с атрибута href.*/
      var id = $(this).attr('href') || $(this).attr('data-target');
      /*Узнаём высоту от начала страницы до блока, на который ссылается якорь.*/
      var top = $(id).offset().top;
      /*Анимируем переход на расстояние - top за 1000ms.*/
      $('body,html').animate({scrollTop: top}, 1200);

<template>
  <form>
    <p v-if='errorMessage'>{{ errorMessage }}</p>
    <input type='text' v-model='username'/>
    <input type='password' v-model='password'/>
    <button @click='send()'>Log in</button>
  </form>
</template>

<script>
import someHttpClient from 'someHttpClient'

export default {
  data: {
    return {
      username: '',
      password: '',
      errorMessage: ''
    }
  },
  methods: {
    send () {
      var username, password, errorMessage = this
      if (username && password) {
        errorMessage = ''
        someHttpClient.sendAndMaybeCipher({ username, password })
      } else {
        errorMessage = 'Form not filled properly'
      }
    }
  }
}
</script>

Примеры запроса:

• Чем отличается ajax-запрос post от get?
  
• Какое значение из input type=file передавать на сервер?
  
  

document.querySelectorAll('.other-products > .products');

{
    xtype: 'triggerfield',
    listeners: {
        change: function(newVal, oldVal, field) {
            console.log('new value', newVal);
            console.log('old value', oldVal);
            console.log('field', field);
        } 
    }
}