ホームページ  >  記事  >  ウェブフロントエンド  >  React で配列を効率的にレンダリングするにはどうすればよいですか?

React で配列を効率的にレンダリングするにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-11-06 07:25:03936ブラウズ

How to Efficiently Render Arrays in React?

React 配列のレンダリングが簡単になりました

React での要素のリストのレンダリングは一般的なタスクです。これを効率的に行う方法は次のとおりです:

最初の方法:

<code class="javascript">render() {
    const data =[{&quot;name&quot;:&quot;test1&quot;},{&quot;name&quot;:&quot;test2&quot;}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>;
    
    return (
      <div>{listItems}</div>
    );
  }</code>

この方法では、React 要素の配列を作成し、コンテナー div でレンダリングします。

2 番目のメソッド:

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }</code>

このメソッドは、map 関数を return ステートメントで直接使用するため、構文が簡素化されます。

これらのメソッドのいずれか好みに応じて、React でオブジェクトの配列をレンダリングするために使用できます。

以上がReact で配列を効率的にレンダリングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。