Javascript React.js：设置innerHTML与危险的LysetinerHTML

设置元素的innerHTML与设置元素的危险的lySetInnerHTML属性有什么“幕后”区别吗？假设为了简单起见，我正在适当地清理东西

例如：

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

var test=React.createClass({
render:function（）{
返回(
);
}
});

vs

var test=React.createClass({
componentDidUpdate:函数（prevProp、prevState）{
this.refs.test.innerHTML=“Hello”；
},
render:function（）{
返回(
);
}
});

我正在做的事情比上面的例子要复杂一些，但总体思路是相同的基于（）

---

这是一个道具，完全符合你的要求。然而，他们给它命名是为了传达应该谨慎使用的信息

是的，这是有区别的

使用

innerHTML

与

dangerlysetinerHTML

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

但是，在幕后，当您使用

危险的HTML时，它会让React知道该组件内部的HTML不是它关心的东西

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

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

您使用
componentdiddupdate
始终确保内容同步的解决方案我相信会起作用，但每次渲染时可能会出现闪光。
根据

不正确地使用
innerHTML
可能会使您陷入困境
攻击。为显示而清理用户输入是出了名的容易出错，
而未能正确地消毒是导致网络瘫痪的主要原因之一
互联网上的漏洞

我们的设计理念是，让事情变得安全应该“容易”，
开发人员在执行时应明确说明其意图
“不安全”操作。道具名称为
故意选择令人恐惧的道具值（对象）
而不是字符串）可用于指示已清除的数据

在充分了解安全后果并正确处理后
清理数据时，创建一个仅包含密钥的新对象
\uuuu html
并将经过消毒的数据作为值。这里有一个例子
使用JSX语法：

函数createMarkup（）{
返回{
__html:'First·；Second'}；
}; 

使用以下链接了解更多信息：

文档：。
您可以直接绑定到dom

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


我编写了一个小型的、非科学的性能测试，以显示内联SVG和使用危险的SetinenerHTML之间的区别：-tun我们发现，innerHTML方法的速度几乎是webpackbin中的两倍（请参见网页包装箱中的控制台），这是真实的，而且很容易预测。因为innerHTML是一种本机方法，它将SVG代码直接绑定到DOM，而不考虑任何问题。另一方面，危险的是，SytenerHTML是一种来自React的方法，SVG代码必须作为React组件子级进行解析，然后才能放入虚拟DOM，然后呈现到DOM。根据文档，这似乎是唯一的原因，仍然令人困惑。这并不能回答问题。
function createMarkup() {
    return {
       __html: 'First &middot; Second'    };
 }; 

<div dangerouslySetInnerHTML={createMarkup()} /> 

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