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

Question

我從后端收到 html 字符串。 我正在使用 react-html-parser 解析 html 字符串。 但是包的導入大小是174kb 。 我可以使用innerHTML做同樣的事情。 請參考下面的代碼。 我在 useEffect 中設置 innerHTML，以便在text更改時反映更改。

• 使用 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 ，但它的使用有安全方面的考慮。

為了避免注入攻擊（如 XSS），我們應該在插入時清理 html（即使數據庫正在存儲清理過的 html）。

使用像sanitize-html或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 解析。 這不一樣。 根據 MDN 文檔，

Element 屬性 innerHTML 獲取或設置元素中包含的 HTML 或 XML 標記。