Проблема с реакцией

Question

Я читал о том, что Реакт был очень быстрым. Недавно я написал приложение для тестирования, реагирующего на угловые. К сожалению, я обнаружил, что реакция выполняется медленнее, чем угловая. http://shojib.github.io/ngJS/#/speedtest/react/1

Вот исходный код для реакции. Я очень недавно реагирую. Я уверен, что я делаю что-то не так с моим кодом реакции здесь. Я нахожу это необычно медленным. https://jsbin.com/viviva/edit?js,output

Посмотрите, могут ли какие-либо специалисты по реагированию найти узкие места.

---

Update 1:

1. Убрано использование контекста.
2. Лучшее использование setState.
3. Лучшее использование shouldComponentUpdate.

Я все еще не могу сделать это быстрее, чем угловой или даже близко к нему. https://jsbin.com/viviva/96/edit?js,output

---

Update 2:

Я сделал большую ошибку, создав 2d массивов в компоненте клеток. Поэтому я перевел их на микс. Теперь я считаю, что реагирование быстрее, чем угловатое в DOM-манипуляциях. https://jsbin.com/nacebog/edit?html,js,output

---

Update 3:

Моя ошибка снова. Я сделал это неправильно, что сделало это быстрее. После анализа это было неверно. Если кто-нибудь может помочь мне понять, если это может быть быстрее. Я знаю, что реагировать не очень хорошо на большие массивы. В этом случае речь идет о четырех трехмерных массивах. https://jsbin.com/viviva/100/edit?html,css,js

Answer 1

Это очень надуманный пример, на мой взгляд.

• Как указано выше, вы используете контекст неправильно.
• Нет необходимости в mixin: количество столбцов и строк может и должно передаваться в виде реквизита. create2DArray, getRandomNumber должны быть объявлены в верхней части вашего скрипта как простые глобальные функции.

• Неправильное положение. Вы не должны изменять состояние, подобное этому this.state.some = 'whatever', вам нужно использовать setState

  this.setState ({some: 'whatever'});

Answer 2

Эффект Реагента преувеличен. Это достаточно быстро для большинства реальных случаев использования. Основным недостатком является рендеринг больших списков.

---

Также это всегда возвращает true (если обновление не инициировано setState). Вам нужно поменьше сравнить реквизит.

shouldComponentUpdate: function(nextProps, nextState) { 
    return this.props !== nextProps; 
    } 

И вы должны использовать реквизит в местах, где вы используете контекст.

Answer 3

Вы используете контекст неправильно, документация гласит:

В частности, подумайте дважды, прежде чем использовать его, чтобы «сохранить ввод» и используя его вместо передачи явных реквизита.

В основном это полезно для передачи объектов контекста, таких как в настоящее время зарегистрированный пользователь или, возможно, магазин redux. Ваше приложение использует контекст, когда он должен использовать реквизиты.

Вам необходимо убедиться, что shouldComponentUpdate является значимым предикатом. См. https://facebook.github.io/react/docs/advanced-performance.html

Если вы исправите эти две вещи, это будет лучшим показателем эффективности Реакта по сравнению с угловым. На данный момент у вас есть хорошо настроенный Ferrari, работающий против модели T Ford (удерживаемой вместе с жевательной резинкой).