useSolidForComponent

JavaScript (and super languages)

摘要

¥Summary

规则生效日期：v2.0.0

¥Rule available since: v2.0.0
诊断类别：lint/performance/useSolidForComponent

¥Diagnostic Category: lint/performance/useSolidForComponent
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 information。

¥The default severity of this rule is information.
此规则属于以下域：

¥This rule belongs to the following domains:
- solid
来源：

¥Sources:
- 灵感来自 solid/prefer-for
  
  ¥Inspired from solid/prefer-for

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "performance": {
5
        "useSolidForComponent": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

强制使用 Solid 的 <For /> 组件将数组映射到 JSX 元素。

¥Enforce using Solid’s <For /> component for mapping an array to JSX elements.

在 Solid 中，使用 <For /> 组件可以高效地渲染列表。Array#map 会导致 DOM 元素被重新创建。

¥In Solid, <For /> component for efficiently rendering lists. Array#map causes DOM elements to be recreated.

有关 <For /> 组件的详细信息，请参阅关于组件的详尽文档。

¥For details on <For /> Component, see the Solid docs about Components.

示例

¥Examples

无效

¥Invalid

1
let Component = (props) => <ol>{props.data.map(d => <li>{d.text}</li>)}</ol>;

code-block.jsx:1:33 lint/performance/useSolidForComponent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Array.prototype.map will cause DOM elements to be recreated, it is not recommended to use it in Solid here.
  
  > 1 │ let Component = (props) => <ol>{props.data.map(d => <li>{d.text}</li>)}</ol>;
      │                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Use Solid’s <For /> component for efficiently rendering lists. See Solid docs for more details.

1
let Component = (props) => <>{props.data.map(d => <li>{d.text}</li>)}</>;

code-block.jsx:1:31 lint/performance/useSolidForComponent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Array.prototype.map will cause DOM elements to be recreated, it is not recommended to use it in Solid here.
  
  > 1 │ let Component = (props) => <>{props.data.map(d => <li>{d.text}</li>)}</>;
      │                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Use Solid’s <For /> component for efficiently rendering lists. See Solid docs for more details.

1
let Component = (props) => (
2
  <ol>
3
    {props.data.map((d) => (
4
      <li key={d.id}>{d.text}</li>
5
    ))}
6
  </ol>
7
);

code-block.jsx:3:6 lint/performance/useSolidForComponent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Array.prototype.map will cause DOM elements to be recreated, it is not recommended to use it in Solid here.
  
    1 │ let Component = (props) => (
    2 │   <ol>
  > 3 │     {props.data.map((d) => (
      │      ^^^^^^^^^^^^^^^^^^^^^^^
  > 4 │       <li key={d.id}>{d.text}</li>
  > 5 │     ))}
      │     ^^
    6 │   </ol>
    7 │ );
  
  ℹ Use Solid’s <For /> component for efficiently rendering lists. See Solid docs for more details.

有效

¥Valid

1
let Component = (props) => <ol><For each={props.data}>{d => <li>{d.text}</li>}</For></ol>;

1
let abc = x.map(y => y + z);

1
let Component = (props) => {
2
 let abc = x.map(y => y + z);
3
 return <div>Hello, world!</div>;
4
}

useSolidForComponent

摘要

如何配置

描述

示例

无效

有效

相关链接