JavaScript — React.js и Isotope.js

React.js и Isotope.js

Вы можете управлять домом прямо внутри React. Это позволяет интегрировать существующие библиотеки JS или для нестандартных потребностей, которые плохо обрабатываются React.

Вы можете найти пример здесь:

https://github.com/stample/gulp-browserify-react-phonegap-starter/blob/master/src/js/home/homeComponents.jsx#L22

И вот как это выглядит:

образ


Проблема с интеграцией React и такой библиотеки, как Isotope, заключается в том, что в итоге у вас будет две разные библиотеки, пытающиеся обновить одно и то же поддерево dom. Поскольку React работает с diff-ами, он предполагает, что он один модифицирует dom.

Таким образом, идея может состоять в том, чтобы создать компонент React, который будет рендериться только один раз и никогда не обновится сам. Вы можете убедиться в этом с помощью:

 shouldComponentUpdate: function() { return false; } 

С этим вы можете:

  • Используйте React для создания HTML-элементов вашего изотопного элемента (вы также можете создавать их без React)
  • В componentDidMount инициализируйте изотоп на узле dom, смонтированном React

И это все. Теперь React никогда не обновит эту часть домена снова, и Изотоп может свободно манипулировать ею так, как он хочет, без вмешательства в React.

Кроме того, насколько я понимаю, Isotope не предназначен для использования с динамическим списком элементов, поэтому имеет смысл иметь компонент React, который никогда не обновляется.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector