React.js: Встановіть innerHTML проти небезпечноSetInnerHTML

Чи є різниця "поза кадром" від встановлення внутрішньогоHTML елемента проти встановлення властивості небезпечноSetInnerHTML на елементі? Припустимо, що я належним чином дезінфікую речі заради простоти.

Приклад:

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

Я роблю щось трохи складніше, ніж наведений вище приклад, але загальна ідея та ж

Так, є різниця!

Безпосередній ефект використання innerHTMLпорівняно з dangerouslySetInnerHTMLідентичним - вузол DOM оновиться введеним HTML.

Однак за лаштунками, коли ви користуєтесь dangerouslySetInnerHTMLцим, дає можливість реагувати, що HTML всередині цього компонента - це не те, що його хвилює.

Оскільки React використовує віртуальний DOM, коли він іде на порівняння відмінностей від фактичного DOM, він може випрямлювати обхід перевірки дітей цього вузла, оскільки знає, що HTML надходить з іншого джерела . Таким чином, є підвищення продуктивності.

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

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

Згідно з небезпечно встановленими внутрішніми HTMLML ,

Неправильне використання кані innerHTMLможе відкрити вас до нападу міжсайтових сценаріїв (XSS) . Санітизація даних користувачів для відображення є, як відомо, схильною до помилок, а невдача належним чином оздоровитись - одна з провідних причин вразливості веб-сторінок в Інтернеті.

Наша філософія дизайну полягає в тому, що робити "речі" безпечно, а розробники повинні чітко заявляти про свої наміри під час виконання "небезпечних" операцій. Ім’я опори dangerouslySetInnerHTMLнавмисно вибрано як лякаюче, а значення опори (об'єкт замість рядка) може використовуватися для позначення даних, що санітуються.

Після повного розуміння наслідків безпеки та належної дезінфекції даних, створіть новий об'єкт, що містить лише ключ __htmlта ваші санітарні дані як значення. Ось приклад використання синтаксису JSX:

function createMarkup() {
    return {
       __html: 'First · Second'    };
 }; 

<div dangerouslySetInnerHTML={createMarkup()} /> 

Детальніше про це читайте за посиланням нижче:

документація : Реагувати елементи DOM - небезпечноSetInnerHTML .

На основі ( небезпечноSetInnerHTML ).

Це опора, яка робить саме те, що ви хочете. Однак вони називають це, щоб переконатися, що використовувати його слід обережно