使用react解析器还是innerHTML解析html字符串？哪个更快？

Question

我从后端接收html字符串。我正在使用react- html解析器解析html字符串。但是包的导入大小是174kb。我可以使用innerHTML做同样的事情。请参阅下面的代码。我将innerHTML设置为useEffect，以便在text更改时反映更改。

• 使用innerHTML

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

• 使用解析器(我可以在can语句本身中这样做)

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

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

​

​

Answer 1

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

如果它只是设置一个html值，您可以使用.innerHTML，但是它的使用有安全考虑。

为了避免注入攻击(如XSS)，我们应该在插入时对html进行消毒(即使DB存储的是经过消毒的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文档，

元素属性innerHTML获取或设置元素中包含的HTML标记。