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>
    );
  }
});

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

Ответ 1

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

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

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

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

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

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

Ответ 2

На основании (dangerouslySetInnerHTML).

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