React.js：設置 innerHTML 與 dangerouslySetInnerHTML

Question

設置元素的 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>
    );
  }
});

我正在做一些比上面的例子更復雜的事情，但總體思路是一樣的

Answer 1

是的，有區別！

使用innerHTML與使用dangerouslySetInnerHTML的直接效果是相同的——DOM 節點將使用注入的HTML 進行更新。

然而，在幕后，當您使用dangerouslySetInnerHTML SetInnerHTML 時，它讓 React 知道該組件內部的 HTML 不是它關心的東西。

因為 React 使用虛擬 DOM，當它比較 diff 與實際 DOM 時，它可以直接繞過檢查該節點的子節點，因為它知道 HTML 來自另一個源。 所以有性能提升。

更重要的是，如果你只是簡單地使用innerHTML ，React 沒有辦法知道 DOM 節點被修改了。 下一次調用render函數時， React 將覆蓋手動注入的內容，它認為該 DOM 節點的正確狀態應該是什么。

您使用componentDidUpdate始終確保內容同步的解決方案我相信會奏效，但在每次渲染期間可能會有閃光。

Answer 2

根據Dangerously Set innerHTML ，

對innerHTML不當使用會使您innerHTML跨站點腳本(XSS)攻擊。 眾所周知，清理用於顯示的用戶輸入容易出錯，而未能正確清理是導致 Internet 上 Web 漏洞的主要原因之一。

我們的設計理念是讓事情變得安全應該是“容易”的，開發人員在執行“不安全”操作時應該明確說明他們的意圖。 道具名稱dangerouslySetInnerHTML被故意選擇為令人恐懼，道具值（一個對象而不是字符串）可用於指示已清理的數據。

在充分了解安全后果並正確清理數據后，創建一個僅包含密鑰__html和清理數據作為值的新對象。 下面是一個使用 JSX 語法的例子：

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

<div dangerouslySetInnerHTML={createMarkup()} /> 

使用以下鏈接閱讀更多信息：

文檔： React DOM Elements-dangerouslySetInnerHTML 。

Answer 3

可以直接綁定dom

<div dangerouslySetInnerHTML={{__html: '<p>First &middot; Second</p>'}}></div>

Answer 4

基於（ 危險的SetInnerHTML ）。

這是一個完全符合您要求的道具。 然而，他們命名它是為了表達應該謹慎使用它

Answer 5

是的，兩者之間存在差異：危險的SetInnerHTML：React diffing算法（ https://reactjs.org/docs/reconciliation.html ）旨在忽略在此屬性下修改的HTML節點，從而略微提高性能。 如果我們使用innerHTML，React 無法知道DOM 被修改了。 下一次渲染發生時，React 將覆蓋手動注入的內容，它認為該 DOM 節點的正確狀態應該是什么。 這就是 componentDidUpdate 來拯救的地方！

Answer 6

<div style={{whiteSpace: 'pre-wrap'}}>{data}</div>