小编典典

React.js:设置innerHTML vs危险地设置InnerHTML

reactjs

与在元素上设置元素的innerHTML与在元素上设置危险地设置InnerHTML属性有什么“幕后”区别?假设为简单起见,我正在对事物进行适当的消毒。

例:

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

我做的事情比上面的示例复杂一些,但总体思路是相同的


阅读 633

收藏
2020-07-22

共1个答案

小编典典

是,有一点不同!

使用innerHTMLvs 的直接效果dangerouslySetInnerHTML是相同的-DOM节点将使用注入的HTML更新。

但是 ,在使用dangerouslySetInnerHTML它时,让React 在幕后知道该组件内部的HTML并不是它关心的。

由于React使用虚拟DOM,因此当将差异与实际DOM进行比较时,它可以直接绕过检查该节点的子节点, 因为它知道HTML来自其他来源
。这样就可以提高性能。

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

componentDidUpdate我认为可以始终确保内容同步的解决方案,我相信它可以工作,但是在每次渲染过程中可能会有闪光。

2020-07-22