javascript - 使用react html-react-parser或innerHTML解析html字符串？哪个更快？

Question

我从后端收到 html 字符串。我正在使用react-html-parser 解析html 字符串。但包的导入大小为174kb。我可以使用 innerHTML 做同样的事情。请引用下面的代码。我在 useEffect 中设置 innerHTML，以便在 text 更改时反射(reflect)更改。

• 使用innerHTML

  useEffect(() => {
    document.getElementById(`text-${_id}`).innerHTML = text;
}, [text]);

• 使用解析器(我可以在 return 语句本身中完成)

function SomeComponent({_id}) {
return (
    <div className="list-group-item mb-3">
      <div id={`text-${_id}`}>
        {parser(text)}
      </div>
    </div>
)}

我使用 importCost 扩展查看了导入大小。附件。对你来说，哪种方法会更快。值得使用 html-react-parser 吗？

Answer 1

React 是一个 JavaScript 库，它内部使用 JavaScript，所以它会比较慢。

如果只是设置一个html值，可以使用.innerHTML，但是有security considerations其用途。

为了避免注入(inject)攻击(如 XSS)，我们应该在插入时清理 html(即使数据库存储清理过的 html)。

使用类似 sanitize-html 的 sanitizer 或react-sanitize-html像这样

import SanitizedHTML from 'react-sanitized-html';

function SomeComponent({_id}) {
return (
    <div className="list-group-item mb-3">
      <div id={`text-${_id}`}
        <SanitizedHTML html={ text} />
      </div>
    </div>
)}

---

html-to-react 解析器(内部调用 html-to-dom-parser)是 react 特定的，具有不同的用途。如果你看一下它的签名，

/**
 * Converts HTML string to React elements.
 *
 * @param {string} html - HTML string.
 * @param {object} [options] - Parser options.
 * @param {object} [options.htmlparser2] - htmlparser2 options.
 * @param {object} [options.library] - Library for React, Preact, etc.
 * @param {Function} [options.replace] - Replace method.
 * @returns {JSX.Element|JSX.Element[]|string} - React element(s), empty array, or string.
 */
function HTMLReactParser(html, options)

你可以看到它返回React元素、空数组或字符串

---

请注意 Element.innerHTML不是 DOM 解析。这不一样。 AS 根据 MDN 文档，

The Element property innerHTML gets or sets the HTML or XML markup contained within the element.