Thư viện react-masonry-component là giải pháp React chuyên dụng cho bố cục dạng thác nước (masonry), kế thừa từ thư viện Masonry gốc của @desandro. Quá trình phát triển từ phiên bản 2.0 đến 6.3 ghi nhận nhiều cải tiến đáng kể về hiệu năng, tính tương thích và hỗ trợ công cụ. Dưới đây là phân tích chi tiết các cột mốc quan trọng.

Phiên bản 2.0: Xây dựng nền tảng cho React hiện đại

Phiên bản ra mắt năm 2015 đánh dấu bước chuyển đổi quan trọng khi loại bỏ sự phụ thuộc vào React 0.14 trở xuống. Thay vào đó, thư viện tập trung vào các API mới từ React 0.14+, tận dụng tối đa cơ chế rendering và lifecycle methods hiện đại. Quyết định này tạo tiền đề cho các tính năng nâng cao ở phiên bản sau.

Phiên bản 3.0: Tối ưu hóa quản lý phụ thuộc

Cải tiến nổi bật bao gồm:

• Thiết lập peerDependencies cho React >= 0.14
• Loại bỏ các forked dependencies, chuyển sang sử dụng package chính thống từ NPM
• Thêm khả năng truyền custom props vào component, mở rộng tính linh hoạt khi tùy chỉnh

Phiên bản 4.0: Nâng cấp lõi và xử lý hình ảnh

Thay đổi trọng tâm tập trung vào:

• Cập nhật masonry-layout lên phiên bản 4.0.0 với cải thiện hiệu năng đáng kể
• Triển khai sự kiện onImagesLoaded để xử lý logic sau khi hình ảnh tải xong
• Thay thế hàm extend tự viết bằng lodash.assign cho thao tác object hiệu quả hơn
• Sửa lỗi rò rỉ bộ nhớ qua việc gọi masonry.destroy() khi unmount component (4.0.4)

Phiên bản 5.0: Tăng cường ổn định và hỗ trợ TypeScript

Loạt phiên bản 5.x tập trung vào:

• Kết hợp create-react-class và prop-types để tương thích với React tách rời package
• Mở rộng định nghĩa TypeScript: hỗ trợ string cho columnWidth (5.0.6), thêm horizontalOrder vào interface (5.0.7)
• Sửa lỗi cú pháp và xử lý sự kiện như khắc phục lỗi let trong strict mode (5.0.3), loại bỏ listener đúng cách (5.0.4)

Phiên bản 6.0: Hỗ trợ React 16+ và TypeScript nâng cao

Các thay đổi chính:

• Cập nhật peer dependency cho React 16.0.0+
• Chuyển từ các hàm lodash riêng lẻ sang sử dụng toàn bộ thư viện Lodash
• Mở rộng interface TypeScript: cho phép columnWidth nhận giá trị HTMLElement | null (6.2.0), hỗ trợ number cho transitionDuration (6.1.1)

Phiên bản 6.3.0: Tương thích với React 17

Phiên bản mới nhất đảm bảo hoạt động ổn định trong môi trường React 17, duy trì tính kế thừa với các phiên bản trước đó mà không thay đổi API chính.

Cách triển khai cơ bản

Cài đặt qua npm:

npm install react-masonry-component

Ví dụ sử dụng với cấu hình tùy chỉnh:

import React from 'react';
import Masonry from 'react-masonry-component';

const masonryConfig = {
  transitionDuration: '0.3s',
  gutter: 10
};

const HinhAnhTran = ({ danhSach }) => {
  const phanTuCon = danhSach.map(hinh => (
    <div key={hinh.id} className="item">
      <img src={hinh.url} alt={hinh.ten} />
    </div>
  ));

  return (
    <Masonry
      className="thu-vien"
      elementType="div"
      options={masonryConfig}
      disableImagesLoaded={false}
    >
      {phanTuCon}
    </Masonry>
  );
};