Menggunakan pengurangan, peta dan penapis untuk Pemprosesan Data dalam Projek React

Dalam kira-kira 5 tahun saya telah bekerja sebagai pembangun web, 3 fungsi tatasusunan ini adalah yang paling kerap saya gunakan untuk mengurus data dan berinteraksi dengan tatasusunan. Untuk projek React itu sendiri, 3 fungsi tatasusunan ini sangat berkuasa untuk pemprosesan data, berikut adalah lebih kurang berkesan penggunaan 3 fungsi ini.

Peta untuk 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;

Penapis untuk pemaparan bersyarat

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;

Kurangkan untuk Mengira Data

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;

Menggabungkan peta, menapis dan mengurangkan dalam 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;

Kesimpulan

Dalam aplikasi React, peta, penapis dan pengurangan bukan sahaja alat untuk memanipulasi data, tetapi juga cara untuk menjadikan UI secara dinamik dan cekap. Dengan memahami dan menguasai fungsi ini, kami boleh mencipta aplikasi yang lebih modular, mudah dibaca dan berskala. Jadi, teruskan meneroka dan melaksanakan fungsi ini dalam projek React kami untuk hasil yang maksimum

Atas ialah kandungan terperinci Menggunakan pengurangan, peta dan penapis untuk Pemprosesan Data dalam Projek React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!