innerHTML和dangerouslySetInnerHTML用法

innerHTML

let root = document.querySelector('#root')
root.innerHTML = '测试文本换行<br><font color="red">红色</font>';

DangerouslySetInnerHTML

function App(){
  return(
    <div 
	  dangerouslySetInnerHTML={{ 
	    __html: '测试文本换行<br><font color="red">红色</font>' 
	  }}
    >
    </div>);
}
ReactDOM.render(<App />, document.querySelector("#root"));

区别

React项目中使用dangerouslySetInnerHTML，React渲染采用的是虚拟DOM，当和实际DOM做比对时，可以直接绕过不检查这个节点的children内容，因此性能会有提升。