私は Web 開発者として働いてきた約 5 年間で、データの管理と配列の操作に最も頻繁に使用するのはこれら 3 つの配列関数です。 React プロジェクト自体にとって、これら 3 つの配列関数はデータ処理に非常に強力です。これら 3 つの関数の多かれ少なかれ効果的な使用法を次に示します。

renderList のマップ

import React from 'react';

const users = ['Alice', 'Bob', 'Charlie'];

function UserList() {
  return (
    

{users.map((user, index) => (
• {user}
))}

条件付きレンダリング用のフィルター

import React from 'react';

const users = ['Al', 'Bob', 'Charlie'];

function UserList() {
  const filteredUsers = users.filter(user => user.length > 3);

  return (
    

{filteredUsers.map((user, index) => (
• {user}
))}

データを計算するためのリデュース

import React from 'react';

const products = [
  { id: 1, name: 'Laptop', price: 1500 },
  { id: 2, name: 'Phone', price: 800 },
  { id: 3, name: 'Tablet', price: 1200 }
];

function TotalPrice() {
  const totalPrice = products.reduce((acc, product) => acc   product.price, 0);

  return (
    

      
Total Price: ${totalPrice}
    
  );
}

export default TotalPrice;

React でのマップ、フィルター、リデュースの組み合わせ

import React from 'react';

const products = [
  { id: 1, name: 'Laptop', price: 1500, discount: 200 },
  { id: 2, name: 'Phone', price: 800, discount: 50 },
  { id: 3, name: 'Tablet', price: 1200, discount: 100 }
];

function DiscountedProducts() {
  const discountedProducts = products.filter(product => product.discount > 0);
  const totalDiscount = discountedProducts.reduce((acc, product) => acc   product.discount, 0);

  return (
    

      
Total Discount: ${totalDiscount}
      

        {discountedProducts.map(product => (
          
{product.name} - Discount: ${product.discount}
        ))}
      
    
  );
}

export default DiscountedProducts;

結論

React アプリケーションでは、マップ、フィルター、リデュースはデータを操作するためのツールであるだけでなく、UI を動的かつ効率的にレンダリングする方法でもあります。これらの機能を理解して習得することで、よりモジュール化され、読みやすく、スケーラブルなアプリケーションを作成できます。したがって、最大限の結果を得るために、React プロジェクトでこれらの関数を探索および実装し続けてください