React.js：设置 innerHTML 与危险地SetInnerHTML

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

我正在做一些比上面的例子更复杂的事情，但总体思路是一样的

原文由 Jshoe523 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是，有一点不同！

使用 innerHTML 与 dangerouslySetInnerHTML 的直接效果是相同的——DOM 节点将使用注入的HTML 进行更新。

_然而_，当你在后台使用 dangerouslySetInnerHTML 时，它会让 React 知道该组件内部的 HTML 不是它关心的东西。

因为 React 使用虚拟 DOM，当它去比较 diff 和实际 DOM 时，它可以直接绕过检查该节点的子节点 _，因为它知道 HTML 来自另一个源_。所以有性能提升。

更重要的是，如果你只是简单地使用 innerHTML ，React 是无法知道 DOM 节点已经被修改的。下一次调用 render 函数时， React 会用它认为的 DOM 节点的正确状态覆盖手动注入的内容。

您使用 componentDidUpdate 始终确保内容同步的解决方案我相信会起作用，但每次渲染期间可能会有闪光。

原文由 Francis John 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

可以直接绑定dom

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

原文由 Lekens 发布，翻译遵循 CC BY-SA 4.0 许可协议