设置元素的 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> ); } });
我正在做一些比上面的例子更复杂的事情,但总体思路是一样的
是,有一点不同!
使用innerHTMLvs的直接效果dangerouslySetInnerHTML是相同的——DOM 节点将使用注入的 HTML 进行更新。
innerHTML
dangerouslySetInnerHTML
然而 ,当你使用它时,在幕后dangerouslySetInnerHTML让 React 知道该组件内部的 HTML 不是它关心的东西。
因为 React 使用虚拟 DOM,当它去比较 diff 和实际 DOM 时,它可以直接绕过检查该节点的子节点, 因为它知道 HTML 来自另一个源 。所以有性能提升。
更重要的是 ,如果单纯使用innerHTML,React 是无法知道 DOM 节点是否被修改的。下次render调用该函数时, React 将用它认为该 DOM 节点的正确状态应该 覆盖手动注入的内容。
render
我相信您componentDidUpdate用来始终确保内容同步的解决方案会起作用,但每次渲染期间可能会有闪光。
componentDidUpdate