Javascript 对危险的LysetinerHTML的性能好处

我有一个项目列表和一个想要搜索这些项目的用户。当用户的搜索值与项目名称匹配时，我希望使用项目名称的匹配部分以粗体显示该项目。例如：

const items = [‘milk’, ‘whole milk’, ‘2% milk’]
const searchValue = ‘milk’;

 /* outputted HTML */

<ul>
     <li>
          <Strong>milk<Strong>
     </li>
    <li>
          whole <Strong>milk<Strong>
    </li>
    <li>
          2% <Strong>milk<Strong>
    </li>
</ul>

const items=[“牛奶”、“全脂牛奶”、“2%牛奶”]
const searchValue='milk'；
/*输出的HTML*/


牛奶


全脂牛奶


2%牛奶

应用程序是用React编写的，我编写了以下内容：

render() {
   const { items, searchValue } = this.props;
   return (
      <ul>
         {items.map((item) => {
            const parts = item.split(new RegExp('(' + searchValue + ')'));
            if (parts.length === 1) return null;
            else return <li key={item}>{parts.filter((part) => (part === searchValue ? <strong>{part}</strong> : part))}</li>;
         })}
      </ul>
  );
}

render（）{
const{items，searchValue}=this.props；
返回(

{items.map（（item）=>{
const parts=item.split（新的RegExp（'（'+searchValue+'））；
if（parts.length==1）返回null；
else返回
{parts.filter（（part）=>（part==searchValue？{part}:part））}
；
})}

);
}

上面的代码执行效果很差，有时需要几秒钟来渲染。这并不奇怪，因为像“a”这样的简单搜索值可能会导致数百个项目被呈现。但是，我注意到，如果我使用危险的LysetinerHTML，这些性能问题就会消失：

 render() {
   const { items, searchValue } = this.props;
   return (
      <ul>
         {items.map((item) => {
              if (!item.includes(searchValue)) return null;
              const boldedItem = item.replace(new RegExp(searchValue), (match) => '<Strong>' + match + '</Strong>');
              return <li key={item} dangerouslySetInnerHTML={{ __html: boldedItem }}></li>;
         })}
      </ul>
  );
}

render（）{
const{items，searchValue}=this.props；
返回(

{items.map（（item）=>{
如果（！item.includes（searchValue））返回null；
const boldedItem=item.replace（新的RegExp（searchValue），（匹配）=>''+match+''）；
return
；
})}

);
}

有人知道为什么危险的Html在这里表现得更好吗

---

虽然我可能会通过限制呈现的搜索结果（例如：）而不是使用DangerouslySetinerHTML来解决这个问题，但我仍然想知道在这里发生了什么。

对该代码的更改不仅仅是

DangerouslySetinerHTML

。首先，你没有构造一个（昂贵的？

新的RegExp（“（“+searchValue+”）”）

，在一个简单的字符串搜索后返回

null

，而不是regex。你能给出一些道具的示例值，我们可以用它们来重现第二次长时间渲染，并进行基准测试吗？