React: сколько я могу манипулировать DOM React оказал?

вот что я делаю:http://jsfiddle.net/iamnoah/pTrrw/



критическая секция-это:



position: function() {

  var container = $(this.getDOMNode());

  this._menu = $(this.refs.menu.getDOMNode());

  this._menu.appendTo(document.body).

      offset({

          top: container.offset().top + 

              container.outerHeight(),

          left: container.offset().left

      });

},

restore: function() {

  this._menu.appendTo(this.getDOMNode());      

},

componentWillUpdate: function() {

  this.restore();

},

componentDidUpdate: function() {

  this.position();

},

componentDidMount: function() {

  this.position();

},


это прекрасно работает сейчас. Я вернул содержимое до обновления компонента в предположении, что React оставляет DOM в покое между обновлениями и не пропустит его. На самом деле, React кажется прекрасным с перемещением контента (если я удалю componentWillUpdate и componentDidUpdate, позиционированный элемент все еще обновляется!)



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




  • React не волнует, если DOM перемещается между обновлениями, пока вы возвращаете его в componentWillUpdate.

  • обработчики событий React по-прежнему будут работать с перемещенными элементами.

  • React объединит любые встроенные стили, которые вы задаете, со стилями, уже находящимися на элементе (даже если он их не установил.)

  • реагировать будет обновление DOM он визуализировал, даже если вы переместите этот DOM куда-то еще в документе!


последний кажется мне несколько экстремальным и волшебным, но имеет некоторые большие последствия, если он имеет место.

565   2  

2 ответов:

я реагирую dev. Я отвечу на каждый из ваших вопросов:

React не волнует, если DOM перемещается между обновлениями, пока вы возвращаете его в componentWillUpdate.

True -- React не смотрит на DOM, кроме как при обновлении, за исключением обработчиков событий:

обработчики событий React по-прежнему будут работать с перемещенными элементами.

Я бы не стал полагаться на это, и я не уверен, что это даже правда сейчас.

React объединит любые встроенные стили, которые вы задаете, со стилями уже на элементе (даже если он их не установил.)

Я также не стал бы полагаться на это-прямо сейчас React устанавливает отдельные свойства, но я мог бы легко представить себе его установку el.style.cssText Если бы это было быстрее, что бы сдуть отдельные изменения, которые вы сделали.

React обновит DOM, который он визуализировал, даже если вы переместите этот DOM где-то еще в документе!

Я не верю, что это правда и вы не должны полагаться на это.

вообще говоря, вы не должны манипулировать вручную DOM, который React создал. Это 100% кошерно, чтобы создать пустой <div> в React и заполнить его вручную; это даже нормально, чтобы изменить свойства React-визуализируемого элемента, пока вы позже не попытаетесь изменить его свойства в React (вызывая React для выполнения обновлений DOM), но если вы перемещаете элемент, React может искать его и запутаться, когда он не может его найти.

надеюсь, что это поможет.

54  
2014-05-09 22:58:31

С одной стороны, я согласен с Софи, что вы не должны основывать решения на деталях реализации. Тем не менее, я бы сказал, что все еще интересно посмотреть, как React на самом деле работает:

некоторые вещи, возможно, немного изменились, но в целом это то, что происходит и как это происходит.

  1. рассмотрим тот факт, что React помещает уникальные идентификаторы (теперь Data - attributes) на каждый элемент DOM, который он создает. Эти идентификаторы в настоящее время основаны на очень простой системе. Этот следует объяснить систему-корневой узел всегда '.0'

               .0
    .0.0        .0.1
.0.0.0     .0.1.0 .0.1.1

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

  1. виртуальный DOM, созданный React, также имеет легкие объекты с одинаковыми идентификаторами. Это простая система отображения между виртуальным DOM и реальным DOM.

  2. именно поэтому элементы в списке перезаписываются, если вы не предоставляете атрибут "ключ", поскольку идентификатор элементов изменится, если элемент будет добавлен или удален в середине списка.

имея это в виду:

React не волнует, если DOM перемещается между обновлениями, пока вы возвращаете его в componentWillUpdate.

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

обработчики событий React по-прежнему будут работать с перемещенными элементами.

да... в какой-то степени. Способ работы обработчиков событий в react заключается в том, что все события являются синтетическими. Это означает, что в узле React root DOM есть только один прослушиватель событий. Все пойманные там события совпадают против слушателей событий в React. Я думаю, что это также использует идентификаторы элементов. Однако, среагировать может сделать какие-то минимальные проверки ее родительского элемента. Я думаю, что это должно работать до тех пор, пока элемент хранится в одном корневом узле, отображаемом React. Тем не менее, React может обновить систему id в будущем и сделать больше проверки родительских узлов в будущем, и это может затем сломаться.

React объединит все встроенные стили, которые вы задаете, со стилями, уже находящимися в элементе (даже если он их не установил.)

на это уже был дан ответ. Работает сейчас, может не работать в будущем. Я не думаю, что это изменится в краткосрочной перспективе, так как есть некоторые анимационные системы, которые зависят от этой детали реализации.

React обновит DOM, который он визуализировал, даже если вы переместите этот DOM куда-то еще в документе!

да, если вы сохраняете тот же элемент DOM с тем же react-id, react не будет знать об этом переместился в документ и просто обновит его, как если бы он был в том же положении, где он его визуализировал. Как вы уже заметили, он должен быть в том же корне реагировать. Это важно, так как React привязывается только к корневому DOM-узлу React для синтетических событий и т. д. Таким образом, React хорошо работает с другими библиотеками и не нуждается в доступе к корневому каталогу документа.

предостережение: только потому, что вы можете сделать что-то не означает, что вы должны. Вообще говоря, вы должны только добавить дополнительные Узлы DOM и добавить свойства на узлах DOM, которые не управляются React (style : transform значения являются общими для анимации). Когда вы делаете другие вещи, поймите, что все может работать, но обычно есть гораздо лучший способ сделать что-то.

что касается вашей проблемы:

Так как бы вы решили мою проблему? например, выпадающее меню внутри области прокрутки отключается переполнением... Я всегда перемещал элемент в тело, но кажется, что это не так реагировать.

Я думаю, что идеальная ситуация здесь заключается в том, чтобы положить выпадающий список в тело для начала. Затем вы можете передавать сообщения между событием щелчка и раскрывающимся списком. Либо вы можете использовать обратные вызовы, чтобы подняться достаточно высоко на виртуальном DOM, а затем обновить реквизиты вплоть до выпадающего списка, чтобы управлять его состоянием. Или просто используйте хорошую систему событий.

16  
2017-10-18 20:01:34

Comments

    Ничего не найдено.
Click here to cancel reply.