React.js：设置innerHTML vs dangerouslySetInnerHTML
是否有任何“幕后”的差异，从设置元素的innerHTML与设置元素危险的SetInnerHTML属性？ 为了简单起见，假设我正确地清理了东西。
例：
var test = React.createClass({ render: function(){ return ( <div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div> ); } }); VS
var test = React.createClass({ componentDidUpdate: function(prevProp, prevState){ this.refs.test.innerHTML = "Hello"; }, render: function(){ return ( <div contentEditable='true' ref='test'></div> ); } });
我做的比上面的例子复杂一些，但总体思路是一样的
是，有一点不同！
使用innerHTML与dangerouslySetInnerHTML innerHTML的直接效果是相同的 – DOM节点将使用注入的HTML进行更新。
但是 ，在幕后使用dangerouslySetInnerHTML SetInnerHTML时，它让React知道该组件内的HTML不是它关心的东西。
因为React使用虚拟DOM，所以当它比较差异与实际的DOM时，它可以直接绕过检查该节点的子节点， 因为它知道HTML来自另一个源 。 所以有性能提升。
更重要的是 ，如果您只是简单地使用innerHTML ，React就无法知道DOM节点已被修改。 下一次调用render函数时， React会覆盖手动注入的内容 ，并且认为该DOM节点的正确状态应该是。
您使用componentDidUpdate解决scheme始终确保内容同步，我相信会工作，但每个渲染过程中可能会有闪光。
基于https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml
这是一个道具，正是你想要的。 不过他们把它命名为传达它应该谨慎使用
