it-swarm.com.ru

React.js: установить innerHTML против опасного SetInnerHTML

Есть ли какое-то "закулисное" отличие от установки элемента innerHTML против установки свойства dangerouslySetInnerHTML для элемента? Предположим, я правильно дезинфицирую вещи ради простоты.

Пример:

var test = React.createClass({
  render: function(){
    return (
      <div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div>
    );
  }
});

против

var test = React.createClass({
  componentDidUpdate: function(prevProp, prevState){
    this.refs.test.innerHTML = "Hello";
  },
  render: function(){
    return (
      <div contentEditable='true' ref='test'></div>
    );
  }
});

Я делаю что-то более сложное, чем приведенный выше пример, но общая идея та же

118
Jshoe523

Да, есть разница!

Непосредственный эффект от использования innerHTML по сравнению с dangerouslySetInnerHTML идентичен - узел DOM обновится с введенным HTML.

Однако , за кулисами, когда вы используете dangerouslySetInnerHTML, это позволяет React знать, что HTML внутри этого компонента не то, о чем он заботится ,.

Поскольку React использует виртуальный DOM, когда он собирается сравнивать diff с фактическим DOM, он может обходить проверку потомков этого узла , потому что он знает HTML исходит из другого источника . Так что есть повышение производительности.

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

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

164
Francis John

На основе https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

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

0
Jason