Quay lại trang Blog

SolidJS là gì? Tìm hiểu thư viện thư viện React hiện đại

20/07/2025
Tác giả: Tân Nguyễn
#Technical

Các thư viện và framework mới luôn xuất hiện nhằm cung cấp những cách tiên tiến hơn để xây dựng giao diện người dùng. Trong số đó, SolidJS nổi bật lên như một thư viện JavaScript hiện đại, hứa hẹn mang lại hiệu suất cao và trải nghiệm lập trình mư\u1ot mà. Nếu bạn đã quen với React hoặc Vue, SolidJS sẽ mang đến cảm giác vừa quen thuộc vừa mới mẻ.

SolidJS là gì?

SolidJS là một thư viện JavaScript tuyên bố để xây dựng giao diện người dùng, tập trung vào hiệu suất và tính phản ứng chi tiết (fine-grained reactivity). Được phát triển bởi Ryan Carniato, SolidJS kế thừa điểm mạnh của React và Vue trong lập trình phản ứng nhưng loại bỏ những vấn đề về hiệu suất.

SolidJS khác biệt nhờ vào tính phản ứng chi tiết và tối ưu hoá khi biên dịch (compile-time optimization). Thay vì sử dụng virtual DOM như React, SolidJS cập nhật DOM thực sự trực tiếp để giảm tối đa chi phí thực thi.

Lịch sử ngắn

Ban đầu, SolidJS được tạo ra như một thí nghiệm nhằm khảo sát độ phản ứng tối đa trong JavaScript. Theo thời gian, nó phát triển thành một thư viện hoàn chỉnh với trải nghiệm lập trình trực quan và mịnh mẽ.

Tính năng nổi bật của SolidJS

1. Tính phản ứng chi tiết (Fine-Grained Reactivity)
SolidJS sử dụng primitives như createSignal, createEffect, createMemo để theo dõi và cập nhật DOM một cách tự động khi dữ liệu thay đổi.

2. JSX quen thuộc
Giống như React, SolidJS sử dụng JSX giúp lập trình viên React chuyển sang dễ dàng.

3. Tối ưu hoá khi biên dịch
SolidJS chuyển mã phản ứng thành JavaScript tối ưu ngay khi build, giám dung lượng bundle và tăng tốc độ thực thi.

4. Không dùng virtual DOM
Khác React, SolidJS cập nhật DOM thực tế ngay lập tức.

5. Kiến trúc Component
Component trong SolidJS đơn giản chỉ là function trả về JSX, có thể lồng nhau như React.

6. Lifecycle Methods
Cung cấp hàm onMount, onCleanup để xử lý logic side-effect.

7. Hiển thị điều kiện & hiệu ứng
Sử dụng Show, Effect giúp hiển thị điều kiện dễ dàng.

SolidJS hoạt động như thế nào?

  • createSignal: tạo state phản ứng.

  • createEffect: theo dõi tự động signal và thực thi khi thay đổi.

  • createMemo: cache giá trị tính toán và chỉ tính lại khi phụ thuộc thay đổi.

SolidJS sử dụng tối ưu hoá khi biên dịch thay vì runtime, giúp mã nhệ nhàng và nhanh.

So sánh SolidJS và React

Khía cạnh

React

SolidJS

Virtual DOM

Có

Không

Cập nhật DOM

Qua reconcile

Trực tiếp DOM

State & Effect

useState, useEffect

createSignal, createEffect

Hiệu suất

Tốt, cần optimize

Rất nhanh

Cộng đồng, Ecosystem

Rất lớn, phong phú

Ít hơn, còn đang phát triển

SolidJS thích hợp dùng khi:

  • Ứng dụng web hiệu suất cao, dashboard, SPA

  • UI phức tạp nhiều tác động

  • Muốn thay thế React mà giữ kiến trúc tuyên bố, JSX

Ví dụ SolidJS

import { render } from 'solid-js/web';
function HelloWorld() {
  return <h1>Hello World</h1>;
}
render(() => <HelloWorld />, document.getElementById('app'));
import { createSignal } from 'solid-js';
function DisplayName() {
  const [name, setName] = createSignal('fuzzysid');
  return (
    <>
      <h1>{name()}</h1>
      <button onClick={() => setName('siddhant')}>Change Name</button>
    </>
  );
}

Bắt đầu với SolidJS

npx degit solidjs/templates/js my-solid-app
cd my-solid-app
npm install
npm start

Kết luận

SolidJS là lựa chọn hứa hẹn cho các dev muốn xây dựng ứng dụng web nhanh, mư\u1ot mà, dựa trên phản ứng chi tiết. Kết hợp SolidJS với CMS như Wisp giúp tối ưu quản lý nội dung lẫn tốc độ website.

Powered by Synscribe