Posted inDevelopment

Làm quen Solid.js: Framework JS nhanh ‘thần sầu’ mà không cần Virtual DOM

Development tutorial - IT technology blog
Development tutorial - IT technology blog

Trải nghiệm Solid.js trong vòng 5 nốt nhạc

Nếu đã từng kinh qua React, anh em sẽ thấy Solid.js cực kỳ gần gũi nhờ cú pháp JSX quen thuộc. Tuy nhiên, đừng để vẻ ngoài đánh lừa. Bí mật thực sự nằm ở cách nó vận hành bên dưới. Để bắt đầu, hãy dùng template Vite chính chủ để tiết kiệm thời gian setup.

# Khởi tạo project
npx degit solidjs/templates/ts my-solid-app

# Di chuyển và cài đặt
cd my-solid-app
npm install

# Khởi động
npm run dev

Sau khi truy cập localhost:3000, hãy thử thay thế nội dung file App.tsx bằng đoạn code Counter dưới đây:

import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);

  return (
    <button onClick={() => setCount(count() + 1)}>
      Số lần bấm: {count()}
    </button>
  );
}

export default Counter;

Lưu ý quan trọng: count ở đây là một hàm (getter). Anh em phải gọi count() để lấy giá trị thay vì dùng biến trực tiếp. Đây là cách Solid theo dõi chính xác nơi nào cần cập nhật trên giao diện mà không phải đoán mò.

Giải mã tốc độ: Tại sao Solid.js lại vượt mặt React?

Nỗi đau chung của dân React là phải dùng useMemo hay useCallback để chặn re-render vô tội vạ. Solid.js khai tử hoàn toàn Virtual DOM để giải quyết triệt để vấn đề này.

Sức mạnh của “Fine-grained Reactivity”

Trong React, mỗi khi state thay đổi, toàn bộ component và cây con sẽ bị quét lại (re-render). Sau đó, nó dùng Virtual DOM để so sánh (diffing) rồi mới cập nhật DOM thật. Quy trình này cực kỳ tốn CPU khi ứng dụng phình to.

Solid.js chọn hướng đi khác: Biên dịch JSX thành các lệnh cập nhật DOM trực tiếp. Khi count() thay đổi, chỉ đúng node text chứa con số đó được cập nhật. Component Counter chỉ chạy đúng một lần duy nhất lúc khởi tạo. Hiệu năng lúc này tiệm cận với code JavaScript thuần (Vanilla JS).

Thực tế, khi mình refactor một dashboard hiển thị 200 biểu đồ thời gian thực từ React sang Solid, mức chiếm dụng CPU giảm từ 40% xuống còn dưới 10%. UI mượt mà ngay cả trên các dòng máy văn phòng cấu hình thấp.

Ba trụ cột cốt lõi của Solid.js

1. Signals – Trái tim của hệ thống

createSignal là đơn vị cơ bản nhất, trả về một cặp [getter, setter]. Việc tách rời này giúp Solid biết chính xác đoạn code nào đang “đăng ký” theo dõi dữ liệu.

const [name, setName] = createSignal("Dev thực chiến");
console.log(name()); // Đọc giá trị
setName("SolidJS siêu tốc"); // Cập nhật

2. Effects – Tự động hóa hành động

Dùng createEffect khi anh em muốn chạy side-effect (như gọi API) mỗi khi signal thay đổi. Khác với useEffect, anh em không cần mảng dependency. Solid đủ thông minh để tự phát hiện signal nào đang được dùng bên trong.

createEffect(() => {
  console.log("Giá trị mới:", name());
});

3. Memos – Bộ nhớ đệm thông minh

Nếu có một phép tính phức tạp dựa trên các signal khác, hãy dùng createMemo. Nó giúp tránh việc tính toán lại không cần thiết, tối ưu hóa tài nguyên hệ thống.

Kiểm soát luồng hiển thị (Control Flows)

Do component chỉ chạy một lần, các vòng lặp .map() hay câu lệnh if/else thông thường sẽ không đạt hiệu năng tối đa. Thay vào đó, hãy dùng các component chuyên dụng của Solid:

  • <For>: Tối ưu việc render danh sách, giữ nguyên các DOM node cũ để tránh lag.
  • <Show>: Thay thế cho toán tử 3 ngôi ? :.
  • <Switch> / <Match>: Xử lý logic nhiều điều kiện cực kỳ gọn sạch.
<For each={users()}>
  {(user) => <li>{user.name}</li>}
</For>

Bí kíp thực chiến tránh “ăn hành”

Nói không với Destructure Props

Đây là lỗi kinh điển của anh em React. Khi viết const { name } = props, anh em đã vô tình bẻ gãy tính phản ứng (reactivity). Hãy luôn truy cập trực tiếp qua props.name để Solid giữ được kết nối với dữ liệu gốc.

Quản lý State toàn cục siêu nhẹ

Quên Context API hay Redux rườm rà đi. Với Solid, anh em chỉ cần tạo một signal ở file riêng rồi export nó. Bất kỳ component nào import vào cũng sẽ nhận cập nhật đồng bộ. Bundle size của Solid chỉ khoảng 7KB, trong khi React cộng thêm các thư viện quản lý state có thể lên tới 50-60KB.

Chốt lại: Khi nào nên đổi sang Solid.js?

Dù React vẫn có hệ sinh thái khổng lồ, Solid.js là lựa chọn số một nếu anh em ưu tiên:

  1. Tốc độ tuyệt đối: Cần xử lý lượng dữ liệu lớn, dashboard real-time.
  2. Ứng dụng siêu nhẹ: Các widget nhúng hoặc web chạy trên thiết bị IoT/Mobile yếu.
  3. Trải nghiệm lập trình: Muốn thoát khỏi mớ bòng bong re-render và dependency array của React Hooks.

Chỉ cần bỏ ra một buổi chiều làm quen, anh em sẽ thấy Solid.js thực sự đưa chúng ta về gần với bản chất của trình duyệt hơn bao giờ hết.

Share:
Tags: