Utilisation de la réduction, du mappage et du filtre pour le traitement des données dans le projet React

Depuis environ 5 ans que je travaille en tant que développeur Web, ces 3 fonctions de tableau sont celles que j'utilise le plus souvent pour gérer les données et interagir avec les tableaux. Pour le projet React lui-même, ces 3 fonctions array sont très puissantes pour le traitement des données, voici des utilisations plus ou moins efficaces de ces 3 fonctions.

Carte pour renderList

import React from 'react';

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

function UserList() {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

export default UserList;

Filtres pour le rendu conditionnel

import React from 'react';

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

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

  return (
    <ul>
      {filteredUsers.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

export default UserList;

Réduire pour calculer des données

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 (
    <div>
      <h2>Total Price: ${totalPrice}</h2>
    </div>
  );
}

export default TotalPrice;

Combiner la carte, le filtre et la réduction dans 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 (
    <div>
      <h2>Total Discount: ${totalDiscount}</h2>
      <ul>
        {discountedProducts.map(product => (
          <li key={product.id}>{product.name} - Discount: ${product.discount}</li>
        ))}
      </ul>
    </div>
  );
}

export default DiscountedProducts;

Conclusion

Dans les applications React, mapper, filtrer et réduire ne sont pas seulement des outils de manipulation des données, mais également des moyens de restituer l'interface utilisateur de manière dynamique et efficace. En comprenant et maîtrisant ces fonctions, nous pouvons créer des applications plus modulaires, plus faciles à lire et évolutives. Alors continuez à explorer et à implémenter ces fonctions dans nos projets React pour un maximum de résultats

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!