解析后端HTML字符串：react-html-parser与innerHTML孰快？是否值得选用？

执行速度：innerHTML更快 #

innerHTML是浏览器原生DOM操作，直接将HTML字符串注入元素，没有额外解析转换步骤，运行时开销极低。而react-html-parser需要先把HTML字符串解析为React元素（比如将<div>转换为React.createElement('div', ...)），过程涉及词法分析、语法转换等额外计算，HTML内容越复杂，性能差距越明显。

是否值得使用react-html-parser？ #

分场景判断：

• 值得用的场景：如果需要让HTML内容和React生态交互——比如给HTML内元素绑定React事件（如onClick、onChange）、接入React状态/上下文，或者需要这些元素被React虚拟DOM的diff算法管理，必须用react-html-parser。因为innerHTML生成的是纯DOM节点，和React虚拟DOM完全脱节，无法实现这类交互需求。
• 没必要用的场景：如果只是纯展示静态HTML，不需要任何React层面的交互，完全没必要用react-html-parser。它带来的174kb包体积增量和运行时解析开销都是冗余的，直接用innerHTML更轻量高效。

额外提醒：安全问题 #

不管用哪种方案，都要警惕XSS风险。如果后端返回的HTML不可信，必须先通过HTML净化工具过滤恶意代码，再渲染到页面上，避免注入攻击。

内容的提问来源于stack exchange，提问作者user19080460